Vue不能實(shí)時(shí)監(jiān)控LocalStorge中的數(shù)據(jù)都哭，當(dāng)需要在組件間共享狀態(tài)時(shí)無(wú)法實(shí)現(xiàn)良好的效果欠橘。
Vuex是一個(gè)專(zhuān)為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式涛目。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)峡竣，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化靠抑。
1.安裝
利用npm安裝Vuex
npm install vuex --save
在src下新建store文件夾，并在其中新建stroe.js中顯式地通過(guò) Vue.use() 來(lái)加載Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
2.使用vuex配合路由守衛(wèi)實(shí)現(xiàn)過(guò)濾器效果
在前置頁(yè)面中添加list_view的標(biāo)識(shí)适掰，在后置頁(yè)面中判斷標(biāo)識(shí)是否存在颂碧，如果存在就可以進(jìn)入，不存在則直接將url重置為首頁(yè)类浪。
在store.js中設(shè)置本地存儲(chǔ)標(biāo)識(shí)list_view,并聲明mutation：in_list完成list_view的賦值
export default new Vuex.Store({
state: {
list_view: ''
},
mutations: {
in_list: (state, n) => {
let list_view = JSON.parse(n);
sessionStorage.setItem('list_view', JSON.stringify(list_view));
state.list_view = list_view;
}
}
})
在前置頁(yè)面的代碼中添加代碼
this.$store.commit('in_list',true);
在后置頁(yè)面中添加beforeRouteEnter事件中處理载城。
beforeRouteEnter: (to,from,next) => {
var s = JSON.parse(sessionStorage.getItem('list_view'));
if(s){
next();
}else{
next("/");
}
}
3.vuex,sessionStorage,localStorage的區(qū)別
vuex中的數(shù)據(jù)是保存在Vue原型對(duì)象中，頁(yè)面刷新時(shí)Vue原型對(duì)象會(huì)重建费就，vuex中數(shù)據(jù)丟失
sessionStorage中的數(shù)據(jù)保存在瀏覽器頁(yè)面內(nèi)存中（本選卡內(nèi)）诉瓦，刷新頁(yè)面不會(huì)丟失，但切換選項(xiàng)卡或關(guān)閉瀏覽器會(huì)丟失
localStorage中的數(shù)據(jù)保存在本地力细，時(shí)間較長(zhǎng)睬澡，直至清除時(shí)丟失
