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。

以下示例实现：

路由器describe Job do let(:job) { Job.new } let(:my_param) { [{"job1" => "run"}, {"job2" => "run again"}] } describe 'run_job' do context 'success' do it 'should pass' do test_result = job.run_job(my_param) expect(test_result[0]["job1"]).to eq("run") end end end end：

src/router/index.js

```

在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动作函数中访问params，在这种情况下＆＃34; id＆＃34;，如下所示：

import router from '@/router'
-------

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

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

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

3 个答案: