将路由器参数转换为Vuex操作

Question

我想将路由器参数传递给Vuex动作,而不必为大型表格中的每个动作获取它们,如下所示:

edit_sport_type({ rootState, state, commit }, event) {
  const sportName = rootState.route.params.sportName <-------
  const payload = {sportName, event}                 <-------
  commit(types.EDIT_SPORT_TYPE, payload)
},

或者像这样,

edit_sport_type({ state, commit, getters }, event) {
  const payload = {sportName, getters.getSportName}  <-------
  commit(types.EDIT_SPORT_TYPE, payload)
},

或者更糟糕的是:从组件道具中抓取参数并将其传递给每次发送的派遣.

有没有办法为大量行动抽象出来？

或者也许是突变本身的替代方法？

Answer 1

从vuex store action获取params,导入vue-router实例,然后从vuex store action访问路由器实例的params.

示例实现如下:

路由器在vuex:

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

```

在vuex商店导入路由器:

router.currentRoute.params.id

然后在vuex动作函数中访问params,在本例中为"id",如下所示:

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router