获取路由器参数到 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 文件中使用它，或者如果您使用模块化方法，则将其导入您的 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 } )
}

然后只要发送这个动作，所有的事情都会在一个动作中处理。所以它有点将它与其余代码隔离开来。这只是一个大概的想法。如果不够清楚，我很抱歉。如果我能提供进一步的帮助，请询问。

Answer 2

不确定是否理解你的问题，但是:
这个插件让你的路由器状态和你的商店保持同步:
https://github.com/vuejs/vuex-router-sync

这听起来像您要找的东西。

Answer 3

要从 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

获取路由器参数到 Vuex 动作

Getting router params into Vuex actions

javascript

flux

vue.js

vuex