Vue.js - 在 Vuex 模块中获取当前路由答案

【问题标题】：Vue.js - Get current route in Vuex moduleVue.js - 在 Vuex 模块中获取当前路由
【发布时间】：2021-05-05 18:29:42
【问题描述】：

我有一个命名空间的 vuex 存储，它根据当前路由的参数返回存储的条目。

import Router from '../../router/index'

const options = {
  routeIdentifier: 'stepId'
}

export function fromRoute(state) {
  if (!options.routeIdentifier || !Router.currentRoute.params) {
    return null
  }

  return state.all.find(element => {
    return element.identifier === Router.currentRoute.params[options.routeIdentifier]
  })
}

这在初始加载时按预期工作。但是，它不会在路由更改时重新加载。

有没有办法在路线改变时重新加载/强制重新计算getter？

【问题讨论】：

更支持在路由模块中导入 store 并使用导航守卫来执行路由事件所需的任何操作。最好将存储视为要导入其他模块的全局数据，反之亦然（辅助模块除外）
感谢您的评论！但是，我想编写一个“通用”存储，我可以为多个命名空间存储重复使用。我的想法是有一个通用的“fromRoute”getter，它总是在状态之外提供相应的实体。我现在选择将 getter 公开为方法。因此，我必须为每个组件编写一个小的计算域，但它可以工作......
与使用beforeEach 设置商店中的当前路线相比，这样做有什么好处？
我必须在每个命名空间存储或我的根存储中设置 currentRoute。我的 rootState 中的更改实际上会触发我命名空间存储的 getter 的重新计算吗？
我想这会更干净，因为我可以删除计算的道具以对每个视图/组件使用 getter :) - 随时发布答案！

标签： javascript vue.js vuex vue-router vuex-modules

【解决方案1】：

在路由器模块中导入商店会更受支持，反之亦然。您可以使用beforeEach 导航守卫来设置商店中的当前路线。首先，准备商店：

store.js

state: {
  route: null
},
mutations: {
  SET_ROUTE(state, route) {
    state.route = route;
  }
},
modules: { ... }

在路由器模块中，使用beforeEach守卫来存储当前路由，也就是to参数：

router.js

import store from '@/store';  // Import the store in the router module

const router = new VueRouter({
  ...
})

router.beforeEach((to, from, next) => {
  store.commit('SET_ROUTE', to);
  next();
});

要在 Vuex 模块 getter 中访问此路由，请通过第三个 getter 参数rootState 访问它：

store/someModule.js

getters: {
  getRoute(state, getters, rootState) {
    return rootState.route;
  }
}

【讨论】：