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

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

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

// 导入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;

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

<template>
  <div>
      vuex使用({{num}})： <br>
      使用getters获取：{{$store.getters.getNum2}}      <br><br>
      {{$store.state.num}}      <br><br>
      <button @click="cNum1">改变值 ++ (mutations)</button>
      <br><br>
      <button @click="cNum2">改变值 +2 (mutations)</button>
      <br><br>
      <button @click="cNum3">改变值 ++ (actions)</button>
      <br><br>
      <button @click="cNum4">改变值 +2 (actions)</button>
      <br><br>
      <button @click="cNum5">异步操作</button>
      <br><br>
      <button @click="cNum7">store中异步操作</button>
      <br><br>
      <button @click="cNum8">getters案例</button>
  </div></template><script>
  // 导入state
  import { mapState } from 'vuex'
  //导入mapMutations
  import { mapMutations } from 'vuex'
  // 导入mapActions
  import { mapActions } from 'vuex'
  // 导入mapGetters
  import { mapGetters } from 'vuex'
  //以上导入vuex各个模块，在本组件中通过映射方式定义，就可以以this.XXX来操作，否则就要this.$store.XXX来操作

  export default {
    data(){
      retrun {
          
      }
    },    computed:{        // 映射 store的state
        ...mapState({          num: state => state.num
        }),        // 映射 store的getters
        ...mapGetters([          'getNum',          'getNum2',
        ])
    },    methods:{        //映射store的mutations
        ...mapMutations([          'changeNum2',          'changeNum'
        ]),        // 映射store中的actions
        ...mapActions([            'changeNumFun',            'changeNumFun2'
        ]),        //
        cNum1(){          // 通过commit提交mutations改变state值
          //this.$store.commit('changeNum')

          // 通过mapMutations注入，直接this调用即可
          this.changeNum();
        },
        cNum2(){          //this.$store.commit('changeNum2', 2);
          //
          this.changeNum2(3);
        },
        cNum3(){          //this.$store.dispatch('changeNumFun')
          this.changeNumFun();
        },
        cNum4(){          //this.$store.dispatch('changeNumFun2', 2)
          this.changeNumFun2(21,10);
        },        async cNum5(){          // 1.
          // var x = await this.cNum6().then((r)=>{
          //   console.log('r------------');
          //   console.log(r);
          //   return r;
          // });

          // 2.
          var x = await this.cNum6();          console.log(x);          console.log('调用完毕后事件...');
        },
        cNum6(){          return new Promise(resolve => {
            setTimeout(() => {              var data = {'id': '111', name: 'zs'};
              resolve(data);
            }, 1000);
          });
        },
        cNum7(){          this.$store.dispatch('changeNumFun3')
        },
        cNum8(){          //console.log(this.$store.getters.getNum);
          // 通过
          console.log(this.getNum2);
        }
    },
    created(){      console.log(this.$store.state.num);
    }
  }</script>

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