vuex-状态管理工具

对于vuex来说，它只是一个状态管理工具，当有些变量不止在组件间用时，可能很多页面都会复用。我们使用vuex进行管理。

state:设置初始值状态。

getters：store仓库的计算属性，主要作用是派生出一些新的状态。比如将state状态的数据进行一次映射或者筛选。

mutations:对state数据进行赋值操作，并进行相应操作；利用store.commit（）触发该操作，

actions处理异步操作，可以使用commit方法，使用store.dispatch（）触发。

实现数据的持久化--跟localStorage结合使用

设置state的状态：

const state = {
    status: '0'
};

设置getters:

    getStatus(state) {
        let t = localStorage.getItem('isLogined')
        if (t == null || t== undefined) {
            t = state.isLogined;
        }
        state.isLogined=t;
        return state.isLogined;
    }    

设置mutations:

SET_STATE(state, val) {
        state.status = val;
        try {
            localStorage.setItem('isLogined',val);
        } catch (e) {
            console.log(e);
        }
    }

使用-----在页面的计算属性 根据getter获取状态

 

computed:{
      isLogined(){
        return this.$store.getters['getStatus'];
    }   
}        

 操作----修改状态即在方法中调用commit：

methods:{
  handleStatus(){
     this.$store.commit('SET_STATUS','1');        
  }
}

（小知识点：如果是在公共函数内调用，请引入store的index的js文件，调用store.getters和store.commit）

storage的存储方式：

localStorage的存储是按照字符串存储的（以上例子为存储字符串格式）。如果存储为对象格式，会出现返回值是{Object object}的情况，那么，存储时要将数据转成string格式，请使用如下方式：

   localStorage.setItem('obj',JSON.stringfy(object))；

storage的读取和使用：

   JSON.parse(localStorage.getItem('obj'))；

注意点：

getter的值是要根据依赖值进行变化的， 即如果return的返回值不是state的数据，则监听不到数据变化。

假如只是return localStorage.getItem('status')的话， 则数据不会更新。必须进行state的赋值和return操作。

如果不需要对数据二次改造的话，也可以写到state的初始值： status: localStorage.getItem('isLogined') || '0'。这样的话取数据只能用this.$store.state.status来获取了。