在获取到vuex的数据时候,想在router目录下的index.js文件去获取到vuex仓库中声明的全局变量,但是通过this.$store.stote.xxx去获取的时候,报错提示:$store未定义
一、store/index.js
const store = new Vuex.Store({
state: {
// 属性:属性值
LoginState: 0,
userInfo: { // 用户信息
userName: '张三'
}
}
(这里的数据只做举例)
二、router/index.js
router.beforeEach((to, from, next) => {
// 获取到用户名信息
const loginState = this.$store.state.userInfo.userName
console.log(loginState)
// next()
})
提示报错
三、解决方法
参考文档:vue2中,在路由守卫中this.$store获取vuex失败问题的解决(vue小技巧)(vue面试必会知识点) - 掘金 (juejin.cn)
其实也就是,导入vuex的仓库,然后用vuex去代替this.$store
1、在router/index.js顶部导入
import vuex from '@/store/index.js'
2、用vuex.state.xxx 代替 this.$store.state.xxx
const loginState = vuex.state.userInfo.userName
console.log(loginState)