vuex资源仓库

1.store中的文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {  //存储基本的数据,单一
        isCollapse: JSON.parse(sessionStorage.getItem('isCollapse')) || false,
        // isCollapse: JSON.parse(localStorage.getItem('isCollapse')) || false,
        // isCollapse: JSON.parse(Cookie.get('isCollapse')) || false,
    },
    getters:{   //类似cpmputed，通过计算
        isCollapse: state=> state.isCollapse,
        
        // isCollapse: function (state){   //es5
        //   return state.isCollapse
        // }
    },
    mutations: {   //修改state中的值，同步函数，理论上是修改mutation的唯一途径
        SET_ISCOLLAPSE(state,value){
          state.isCollapse = !state.isCollapse;
          sessionStorage.setItem('isCollapse',JSON.stringify(state.isCollapse));
          // localStorage.setItem('isCollapse',JSON.stringify(state.isCollapse));
          // Cookie.set('isCollapse',JSON.stringify(state.isCollapse));
        }
    },
    actions: {    //主要用于异步请求，同步的话调用mutation
        setMeunStatus(content,data){
          // content.commit('SET_ISCOLLAPSE')  //同步   用mutation中的函数修改
          //异步请求接口后，接着去做一些事情
        },
    },
  modules: {   //在这里管理store模块
  }
})

2.在调用的地方

v2.0:

this.$store.state.isCollapse;
this.$store.getter.isCollapse;
this.$store.commit('SET_ISCOLLAPSE');
this.$store.dispatch('setMeunStatus','参数');

v3.0:

root.$store.state.isCollapse;
root.$store.getter.isCollapse;
root.$store.commit('SET_ISCOLLAPSE');
root.$store.dispatch('setMeunStatus','参数');

modules将stroe模块化，最好在每个store文件中添加namespaced命名空间，这样就会避免每个文件中一样的变量带来的问题。

app.js文件

const app = {
    state: {
    },
    getters:{  
    },
    mutations: { 
    },
    actions: { 
    }
}
export default app;

主文件中

import Vue from 'vue'
import Vuex from 'vuex'
import app from './app'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {    //模块，在有多个store的时候在这边集中管理
    app
  }
})

3.别的页面可以监听这个值得变化做出相应的处理