15.Vuex使用

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

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来操作，详情见案例

案例

1.在src/main.js中使用vuex

....
省略路由和其他组件导入方式....
....
// 导入vuex
import store from './store'

//使用sotre
new Vue({
  el: '#app',
  router,
  store,  // vuex
  components: { App },
  template: ''
});

2. src/store/index.js (vuex配置)

// 导入vue
import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'
// 使用vuex
Vue.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;

3.src/page/vuex/index.vue(vuex案例)