vue状态管理器

vuex 是一个专门为vue.js应用程序开发的状态管理模式。

当我们遇到多个组件共享状态时，多层组件的传值非常繁琐，不利于维护，因此我们把组件的共享状态抽取出来，统一管理，在这种模式下，不管在哪个组件都可以获取状态或触发行为。

//新建store.js文件 

//初始化数据
state: {bannerlist:[]}
//请求数据
action:{
    getbannerlist(context){
        axios.get(‘/banner‘).then(res=>{
            context.commit({
                type:changebannerlist
                data:res.data
        })
    })
}
// 改变状态
mutations: {
    changeBannerlist (state, data) {
      state.bannerlist = data.data
    }
}

//在组件中使用
computed: {
    ...mapState({
     bannerlist: (state) => state.home.bannerlist
   })
 }

created () {
   this.$store.dispatch(‘getBannerlist‘)
 }

//直接获取 修改
//state
this.$ store.state.count
//getter
this.$ store.getters.count
//调用 action 修改 state 值，不带参数
this.$ store.dispatch(‘increment‘);
//调用 action 修改 state 值，带参数
this.$ store.dispatch(‘increment‘,{value :123});

办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）
办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据
办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）

分析：
办法一的缺点是不安全，不适用大数据量的存储；
办法二适用于少量的数据，并且不会出现网络延迟；
办法三是要讲的重点，办法二和办法一一起使用。