解决刷新页面vuex store中数据丢失的问题
解决思路:在项目中,登录后,通过登录接口会获取到很多用户信息,首先将用户信息保存在vuex的store中,同时将这些信息也保存在sessionStorage中。这里需要注意的是vuex中的变量是响应式的,而sessionStorage不是,当你改变vuex中的状态,组件会检测到改变,而sessionStorage就不会了,页面要重新刷新才可以看到改变,所以应让vuex中的状态从sessionStorage中得到,这样组件就可以响应式的变化。
代码展示
vuex代码
const state = {
token:sessionStorage.getItem(`token`)||``,
userInfo:JSON.parse(sessionStorage.getItem(`userInfo`))||{},
roleInfoList:JSON.parse(sessionStorage.getItem(`roleInfoList`))||[],
};
const getters = {
};
const mutations = {
//保存token
setToken(state,token){
sessionStorage.setItem(`token`,token)
state.token=token;
},
//保存用户登录信息
setUserInfo(state, userInfo) {
sessionStorage.setItem(`userInfo`, JSON.stringify(userInfo))
state.userInfo = userInfo;
},
//保存菜单
setRoleInfoList(state,roleInfoList){
sessionStorage.setItem(`roleInfoList`, JSON.stringify(roleInfoList))
state.roleInfoList=roleInfoList
},
}
const actions = {
updateToken(context,value){
context.commit('setToken',value)
},
updateUserInfo(context,value){
context.commit('setUserInfo',value)
},
updateRoleInfoList(context,value){
context.commit('setRoleInfoList',value)
},
}
export default {
namespaced: true,
state,
getters,
mutations,
actions
}
vue组件运用
import {mapState, mapActions, mapMutations} from 'vuex'
export default {
methods: {
//登录接口
getLoginInfo() {
http.getLoginInfo({userToken}).then(data => {
//将获取到的用户信息存在vuex中
this.setUserInfo({userInfo: data});
this.updateUserInfo(data);
......
this.$message('登录成功');
}).catch(e => {
this.$message(e)
})
},
...mapActions(`user`,[`updateToken`,`updateUserInfo`,`updateRoleInfoList`]),
...mapMutations(`user`, [`setUserInfo`, `setToken`, `setRoleInfoList`])
}
}
补充:storage只能存储字符串的数据,对于JS中常用的数组或对象不能直接存储。但我们可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串,再存储到storage中就可以了。
var obj = { name:'Jim' };
var str = JSON.stringify(obj);
//存入
sessionStorage.obj = str;
//读取
str = sessionStorage.obj;
//重新转换为对象
obj = JSON.parse(str);
this.route和this.route的区别
this.$router 实际上 就是全局 路由对象 任何页面 都可以 调用 push(), go()等方法
this.$route 表示当前正在用于跳转的路由器对象,可以调用其name、path、query、params等属性;