15.Vuex使用

vuex官网API https://vuex.vuejs.org/zh-cn/
vuex其实就是数据仓库，用来管理数据，适用于大中型项目，当组件之间数据需要共享时，数据被改变时，组件全部被更新。

1. state：变量定义和初始化（组件中使用：this.$store.state.XX 获取)2. getters：以get方法 供外部调用来获取state值（组件中使用：this.$store.getters.XXX 获取）3. mutations：mutations作用主要是改变state中的值，通过commit('XXX')触发mutations中的方法，mutations中的方法必须是同步的，如果是异步的要放入actions中(组件中使用：this.$store.commit('XXX') 操作)4. actions：actions中的所有操作都是异步的（具体业务操作），也可以提交mutations改变state值(组件中使用：this.$store.dispatch('XXX') 操作)5. modules：将 store 分割成模块，每个模块都有自己的state、getters、mutations、actions

PS：1 - 4 操作可以通过导入模块映射方式以this.XXX来操作，详情见案例

....
省略路由和其他组件导入方式....
....// 导入vueximport store from './store'//使用sotrenew Vue({  el: '#app',
  router,
  store,  // vuex
  components: { App },  template: ''});

// 导入vueimport Vue from 'vue'// 导入vueximport Vuex from 'vuex'// 使用vuexVue.use(vuex);//配置：const store = new Vuex.Store({   // 变量定义和初始化
  state:{    num: 1
  },  // 提供get方法 供外部调用,参数只有state
  getters: {
    getNum(state){        return state.num;
    },    // 通过参数getters方式调用其他get方法
    getNum2(state, getters){      return getters.getNum;
    }
  },  // mutations作用主要是改变state中的值，通过commit('XXX')触发mutations中的方法，mutations中的方法必须是同步的，如果是异步的要放入actions中
  mutations: {    //
    changeNum(state){      //setTimeout(function(){ // 模拟异步操作
        state.num++;      //}, 10)
    },    //方法第二个参数为外部传入，只能有一个，如果多个参数，第二个参数定义成对象
    changeNum2(state, num){
      state.num+=num;
    }
  },  // 异步操作，提交mutations改变state值，actions中的所有操作都是异步的
  actions:{    // 第一个参数直接以store接收
    changeNumFun(store){
        setTimeout( function(){ // 模拟异步操作，实际值是时时改变的
          store.commit('changeNum');
        }, 100);
    },    //第一个参数以commit接收，第二个参数只能有一个，如果多个值定义成对象
    changeNumFun2({commit}, num){
      commit('changeNum2', num)
    },    // 异步操作 await等待返回
    async changeNumFun3(store){      console.log('开始fun3');      var data = await store.dispatch('changeNumFun4');      console.log(data);      console.log('结束开始fun3');      // 打印结果： 开始fun3、{'id': '111', name: 'zsstore'}、结束开始fun3
      // 如果不使用await data输出放在最后
    },
    changeNumFun4(store){         return new Promise(resolve => {
            setTimeout(() => {              var data = {'id': '111', name: 'zsstore'};
              resolve(data);
            }, 1000);
        });
    }
  }
});// 导出export default store;

作者：圆梦人生
链接：https://www.jianshu.com/p/f7ebfbbd092b