一拙泽、插件：vuex-persistedstate
二、使用：
import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate';
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
a:1,
b:2,
},
plugins: [
createPersistedState({//local持久化
key:"project",
storage:window.localStorage,
reducer(val){
return {
token:val.a,
}
},
}),
createPersistedState({//session持久化
key:"project",
storage:window.sessionStorage,
reducer(val){
return {
search:val.b,
}
},
})
]
});
export default store;
三拯勉、優(yōu)點
1竟趾、解決頁面刷新，vuex中存放的數(shù)據(jù)丟失問題
2宫峦、在項目開發(fā)過程中更易維護(hù)緩存中存放的數(shù)據(jù)岔帽，緩存中所有存放的數(shù)據(jù)在代碼中可清晰看見。
3导绷、統(tǒng)一緩存中寫入與讀取的入口犀勒。
四、注意事項
1妥曲、vuex-persistedstate是通過調(diào)取mutations中的方法更新state數(shù)據(jù)時同步存到緩存中的贾费，所以，state的初始值是不會存放到緩存中且通過this.$store.state.a = 1方式修改state的值也是不會觸發(fā)同步緩存的檐盟。
2褂萧、緩存的中的數(shù)據(jù)不會反向同步到state中，解決方案：
const projectLocal= window.localStorage.getItem("project") ? JSON.parse(window.localStorage.getItem("project")) : {};
const projectSession= window.sessionStorage.getItem("project") ? JSON.parse(window.sessionStorage.getItem("project")) : {};
const state = {
a:projectLocal.a? projectLocal.a: 1,
b:projectSession.b? projectSession.b: 2,
};
export default state;
3葵萎、因為localStorage中存放的數(shù)據(jù)是在瀏覽器中导犹，所以如果同時打開多個頁面時，修改localStorage中的值是不會同步到每個頁面的羡忘，如果需求需要同步可以配合緩存監(jiān)聽使用谎痢，或根據(jù)具體需求采取更優(yōu)的解決方案。
window.addEventListener("storage",()=>{});//緩存修改時當(dāng)前展示的頁面不會觸發(fā)卷雕，其他頁面會觸發(fā)节猿。
