将路由器参数添加到 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。

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

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

Answer 1

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

下面的示例实现：

路由器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

Answer 2

不确定是否能很好地理解您的问题，但是：
此插件可让您的路由器状态和您的商店保持同步：
https://github.com/vuejs/vuex-router-sync

这听起来像您正在寻找的东西。

Answer 3

据我所知（我已经为我正在从事的项目研究了这个）不，没有。 最简单的方法是抽象路由获取或您想要对服务执行的任何操作，并在您的 vuex 文件中使用它，或者如果您使用模块化方法将其导入您的 actions.js 文件中。

所以 paramFetching.js 文件看起来像这样：

export default {
  fetchRouteParams: function() {
    // do fetching
    // you should return a promise 
  }
}

然后将其导入您的 vuex

import service from 'paramFetching.js'

然后做出这样的动作

...
fetchParamsAction: function({commit}) {
  service.fetchRouteParams()
    .then( (response) => { // stuff gottten from service. you should o your commit here } )
    .catch( (error) => { // error handling } )
}

然后只需派发这个动作，一切都会在一个动作中处理。所以它有点将它与其他代码隔离开来。 这只是一个一般的想法。如果不够清楚，我很抱歉。如果我可以进一步提供帮助，请询问。