第6章 vuex

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中的数据保存在本地，时间较长，直至清除时丢失