Vue3中Vue Router无法访问Vuex Store的问题及解决办法

原始问题 #

我之前开发过一个未使用路由和状态管理的小型Vue应用，现在要开发规模更大的项目，决定采用Vue Router、Vuex搭配Codeigniter 4 REST API。在尝试用router.beforeEach()路由守卫检查用户是否持有从API获取的Bearer Token（以此判断登录状态）时，执行const token = this.$store.getters.bearer_token;触发了以下错误：

TypeError: undefined has no properties
    <anonymous> index.js:24
    guardToPromiseFn vue-router.mjs:2009

相关代码配置 #

• Main.js：已正确引入并挂载store和router，同时配置了全局axios实例
• ./store/index.js：创建了包含isAuthenticated、bearer_token状态及对应getters的Vuex Store
• Router/index.js：在router.beforeEach钩子中通过this.$store获取token时触发上述错误

解决方案 #

路由守卫中的this仅指向路由实例本身，而非整个Vue应用，因此无法通过this.$store访问全局的Vuex Store。只需在路由文件（Router/index.js）中直接引入已创建好的Vuex Store实例，之后直接调用store的getters即可解决该问题。

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