现象:
一进入页面可以在mounted中获取到vuex中的数据,
mounted() {
console.log('🚀 ~ this.$store.state.user.companyId', this.$store.state.user.companyId);
}
但是刷新页面后就获取不到了。
解释:
刷新页面vue实例重新加载,store被重新赋值,要想存储数据就必须存储在外部。
解决思路:
在用户登录之后,获取到用户信息,在存储store数据的同时,再存储到localStorage中。
vuex中的变量是响应式的,而localStorage中的变量不是,当vuex变量改变时,相应的组件也会得到更新,而localStorage不会,除非操作localStorage的数据,所以应该让vuex中的状态从localStorage中得到。
代码:
1)store -> index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
user: JSON.parse(localStorage.getItem('userData')) || {} // 用户信息
},
mutations: {
// 设置用户 信息
setUser(state, val) {
localStorage.setItem('userData', JSON.stringify(val));
state.user = val;
}
},
actions: {
// 更新 用户信息
updateUser({ commit }, val) {
commit('setUser', val);
}
}
});
2)vue组件中
可以使用mapState辅助函数来帮我们生成计算属性。
import { mapState } from 'vuex';
export default {
computed: {
...mapState({
user: state => state.user
})
},
mounted() {
console.log('🚀 ~ this.$store.state.user.companyId', this.$store.state.user.companyId);
}
}