由于vue自身特性的原因凤覆，vuex中的數(shù)據(jù)在頁面刷新之后其中的數(shù)據(jù)會初始化哈扮，這就導(dǎo)致組件之間通過vuex傳遞的數(shù)據(jù)在用戶f5刷新頁面之后會丟失
這里結(jié)合h5的localStorage實(shí)現(xiàn)頁面刷新之后數(shù)據(jù)不丟失的方法
代碼如下
const store = new Vuex.Store({
// 定義狀態(tài)
state: {
lang: localStorage.getItem("changeLang") || 'zh', //先去localStorage中獲取數(shù)據(jù)
myInfo: JSON.parse(localStorage.getItem("myInfo")) || {}, //這里使用JSON.parse是因?yàn)槲襩ocalStorage中保存的是一個對象字符串
},
//修改狀態(tài)
mutations:{
setInfo(state,info){
localStorage.setItem('myInfo', JSON.stringify(info)); //將傳遞的數(shù)據(jù)先保存到localStorage中
state.myInfo = info;// 之后才是修改state中的狀態(tài)
},
changeLangEvent(state, type) {
localStorage.setItem('changeLang', type);
state.lang = type;
},
},
})
export default store
組件中使用方法
let res = {
name:'張三'哥桥，
age:18
}
this.$store.commit('setInfo',res); //更新myInfo
