javascript - 获取路由器参数到 Vuex Action

Question

我想将路由器参数传递给 Vuex Action ，而不必像这样以大型形式为每个 Action 获取它们:

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)
},

或者更糟糕的是:从组件 props 中获取参数并将它们传递给 dispatch，对于每个 dispatch。

有没有办法将其抽象为大量操作？

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

Answer 1

要从 vuex 存储操作中获取参数，导入您的 vue-router 实例，然后从您的 vuex 访问路由器实例的参数> 通过 router.currentRoute 存储对象。

下面的示例实现:

src/router/index.js 中的路由器:

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 store 导入路由器:

从'@/router'导入路由器

然后在 vuex 操作函数中访问参数，在本例中为“id”，如下所示:

router.currentRoute.params.id