使用Vuex时发现页面刷新以后Vuex里面存储的state数据会丢失，因为我们的state都是存储在内存中的。
解决办法就是将Vuex中的数据存储在本地localStorage中。
1、在mutations中将数据同步保存到localStorage中
SET_USERINFO: (state, userInfo) => {
state.userInfo = userInfo
localStorage.setItem('userInfo', JSON.stringify(state.userInfo))
}
2、在actions取数据时从localStorage取出数据，存入Vuex保证同步
// 获取用户信息
GetUserInfo({ commit, state }) {
// 防止页面刷新vuex中的数据丢失
for (var item in state) {
localStorage.getItem(item) ? state[item] = JSON.parse(localStorage.getItem(item)) : false
}
return new Promise((resolve, reject) => {
getUserInfo({ token: state.token, userCode: state.userInfo.userCode }).then(response => {
if (!response.data) { // 由于mockjs 不支持自定义状态码只能这样hack
reject('error')
}
const data = response.data
if (data.user) {
commit('SET_USERINFO', data.user)
}
resolve(response)
}).catch(error => {
reject(error)
})
})
},
3、退出登录时同步移除localStorage中的数据
// 登出
LogOut({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(() => {
commit('SET_USERINFO', {})
for (var item in state) {
localStorage.removeItem(item)
}
resolve()
}).catch(error => {
reject(error)
})
})
},
