获取路由器参数到 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)
},

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

有没有办法为一大组动作抽象这个？

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

原文由 softcode 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

To get params from vuex store action, import your vue-router ’s instance, then access params of the router instance from your vuex store via the 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 商店导入路由器：

import router from '@/router'

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

 router.currentRoute.params.id

原文由 Cipto HD 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不确定是否很好地理解您的问题，但是：

这个插件让你的路由器状态和你的商店保持同步：

https://github.com/vuejs/vuex-router-sync

这听起来像你在找什么。

原文由 nicolast 发布，翻译遵循 CC BY-SA 3.0 许可协议