获取路由器PARAMS到Vuex行动

我想通过路由器PARAMS到Vuex行动，而无需获取它们的每一个动作在一个大的形式，像这样：获取路由器PARAMS到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) 
},

甚至更糟糕的是：从组件道具中攫取参数并将它们传递给每个派遣的派遣。

有没有一种方法可以抽象出一大组操作？

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

来源

2017-02-11 softcode

据我所知（我研究过这个项目，我正在研究）不，没有。这样做最简单的方法是抽象路由获取或任何你想要做的服务，并在你的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 }) 
}

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

来源

2017-02-12 14:23:03 peaceman

感谢您的回答。这听起来像比使用吸气剂更多的工作（如上所示） – softcode

我没有在与你一样的情况下使用它。您可以选择最适合您的方案，但此解决方案更加灵活，并且可以将问题分离出来。最后，选择是你的。 GL – peaceman

也许在js中更灵活，但是因为你可以在vue的任何地方使用getter，所以不确定。 – softcode

不是一定要了解好你的问题，而是：
这个插件保持同步你的路由器的状态，你的店：
https://github.com/vuejs/vuex-router-sync

，它听起来就像你在找什么。

来源

2017-02-13 23:16:55 nicolast

我觉得@nicolast就在这里。请参阅'vuex-router-sync'自述文件的[它如何工作？]（https://github.com/vuejs/vuex-router-sync#how-does-it-work）部分。添加'vuex-router-sync'会在商店中添加一个'route'模块，现在你可以访问像'path'，'params'和'query'这样的东西。 – stursby

正如你通过使用'rootState.route.params'所看到的，我已经使用'vue-router-sync' – softcode

从vuex store操作获取参数，导入vue-router实例，然后从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行动访问PARAMS功能，在这种情况下，“id”，如下所示：

router.currentRoute.params.id

来源

2017-12-09 08:01:03

获取路由器PARAMS到Vuex行动

回答

相关问题