如何在 Vuex 中获取 Vue 路由器参数？

Posted 2023-02-22

【中文标题】如何在 Vuex 中获取 Vue 路由器参数？

【英文标题】：How to get Vue Router Params in Vuex?

【发布时间】：2018-11-22 06:26:41

【问题描述】：

我无法使用

this.$route.params
route.params
router.params

如何在我的操作中获取 $route 的参数？

【问题讨论】：

带有“vuex”的意思是在store.js里面吗？

在调用this.$store.dispatch('whatever', route: this.$route)时将其作为参数传递

@Fabio 是在模块中的 store.js 内。

@Christophe 是的，这就是我所做的，但想知道是否可以在 store.js 中调用它

我不确定你是否可以直接这样做。它绝对更容易测试，并且是推荐的将其传递给操作的方法，而不是从存储区到全局变量。

【参考方案1】：

在您的 actions.js 或 store.js 中

import router from 'path/to/router'
console.log(router.currentRoute.params)

【参考方案2】：

你可以通过 Vuex 的 state 或 rootState 访问当前路由。

如果动作在模块中，使用rootState：

MY_ACTION: (rootState) => new Promise((resolve, reject) => 
    let params = rootState.route.params
    // do stuff

如果动作不在模块中，使用状态：

MY_ACTION: (state) => new Promise((resolve, reject) => 
    let params = state.route.params
    // do stuff

有关上下文对象的更多信息，请参阅https://vuex.vuejs.org/api/#actions。