Vue不能实时监控LocalStorge中的数据，当需要在组件间共享状态时无法实现良好的效果。
Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
1.安装
利用npm安装Vuex
npm install vuex --save
在src下新建store文件夹，并在其中新建stroe.js中显式地通过 Vue.use() 来加载Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
2.使用vuex配合路由守卫实现过滤器效果
在前置页面中添加list_view的标识，在后置页面中判断标识是否存在，如果存在就可以进入，不存在则直接将url重置为首页。
在store.js中设置本地存储标识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;
}
}
})
在前置页面的代码中添加代码
this.$store.commit('in_list',true);
在后置页面中添加beforeRouteEnter事件中处理。
beforeRouteEnter: (to,from,next) => {
var s = JSON.parse(sessionStorage.getItem('list_view'));
if(s){
next();
}else{
next("/");
}
}
3.vuex,sessionStorage,localStorage的区别
vuex中的数据是保存在Vue原型对象中，页面刷新时Vue原型对象会重建，vuex中数据丢失
sessionStorage中的数据保存在浏览器页面内存中（本选卡内），刷新页面不会丢失，但切换选项卡或关闭浏览器会丢失
localStorage中的数据保存在本地，时间较长，直至清除时丢失
