如何在拆分的Vuex getters.js文件中访问$route？

你遇到的这个问题很典型——当把Vuex拆分成独立模块后，确实没法直接用this.$route在getter里获取路由信息，因为getter函数里的this指向的是Vuex的store实例，而非Vue组件实例，直接调用只会返回undefined。不过在Quasar框架里，我们有几种靠谱的解决办法：

方法1：直接导入Vue Router实例（推荐） #

Quasar项目的路由配置通常放在src/router/index.js中，我们可以直接在getters文件里导入这个router实例，从而轻松访问当前路由：

在你的getters.js中导入router并使用：

// src/store/routes/getters.js
import router from '@/router'

export const current_route = state => {
  // Vue 3 + Quasar 2.x 需使用 currentRoute.value
  return router.currentRoute.value;
  // 如果是Vue 2 + Quasar 1.x，直接用 router.currentRoute
  // return router.currentRoute;
}

这种方法简单直接，router实例是全局可访问的，getter能随时获取最新的路由状态，完全符合Vuex getter作为派生状态的设计理念。

方法2：调用getter时传入$route（不推荐） #

如果你不想依赖全局router实例，也可以在组件调用getter时，把组件的$route作为参数传递进去，但这种方法会让getter失去“纯派生状态”的特性，因为它的结果不再仅依赖store state，还依赖外部参数：

先在getters.js里定义带参数的getter：

export const current_route = state => route => {
  return route;
}

然后在组件中调用：

this.$store.getters['routes/current_route'](this.$route)

这种方法只适合特殊场景，一般不建议使用，因为它破坏了getter的封装性。

补充：为什么原来的this.$route无效？ #

再给你解释下原因：Vuex getter函数的上下文（this）绑定的是Vuex的store对象，而不是Vue组件实例，所以this上并没有$route这个属性——这就是你之前尝试失败的核心原因。

内容的提问来源于stack exchange，提问作者Skeletor