vuex官網(wǎng)API https://vuex.vuejs.org/zh-cn/
vuex其實(shí)就是數(shù)據(jù)倉(cāng)庫(kù)，用來(lái)管理數(shù)據(jù)，適用于大中型項(xiàng)目，當(dāng)組件之間數(shù)據(jù)需要共享時(shí)，數(shù)據(jù)被改變時(shí)，組件全部被更新。

vuex 核心概念:

1. state：變量定義和初始化（組件中使用：this.$store.state.XX 獲取)
2. getters：以get方法 供外部調(diào)用來(lái)獲取state值（組件中使用：this.$store.getters.XXX 獲取）
3. mutations：mutations作用主要是改變state中的值，通過(guò)commit('XXX')觸發(fā)mutations中的方法，mutations中的方法必須是同步的，如果是異步的要放入actions中(組件中使用：this.$store.commit('XXX') 操作)
4. actions：actions中的所有操作都是異步的（具體業(yè)務(wù)操作），也可以提交mutations改變state值(組件中使用：this.$store.dispatch('XXX') 操作)
5. modules：將 store 分割成模塊，每個(gè)模塊都有自己的state、getters、mutations、actions

PS：1 - 4 操作可以通過(guò)導(dǎo)入模塊映射方式以this.XXX來(lái)操作，詳情見(jiàn)案例

案例

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

....
省略路由和其他組件導(dǎo)入方式....
....
// 導(dǎo)入vuex
import store from './store'

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

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

// 導(dǎo)入vue
import Vue from 'vue'
// 導(dǎo)入vuex
import Vuex from 'vuex'
// 使用vuex
Vue.use(vuex);

//配置：
const store = new Vuex.Store({
   // 變量定義和初始化
  state:{
    num: 1
  },
  // 提供get方法 供外部調(diào)用,參數(shù)只有state
  getters: {
    getNum(state){
        return state.num;
    },
    // 通過(guò)參數(shù)getters方式調(diào)用其他get方法
    getNum2(state, getters){
      return getters.getNum;
    }
  },
  // mutations作用主要是改變state中的值，通過(guò)commit('XXX')觸發(fā)mutations中的方法，mutations中的方法必須是同步的，如果是異步的要放入actions中
  mutations: {
    //
    changeNum(state){
      //setTimeout(function(){ // 模擬異步操作
        state.num++;
      //}, 10)
    },
    //方法第二個(gè)參數(shù)為外部傳入，只能有一個(gè)，如果多個(gè)參數(shù)，第二個(gè)參數(shù)定義成對(duì)象
    changeNum2(state, num){
      state.num+=num;
    }
  },
  // 異步操作，提交mutations改變state值，actions中的所有操作都是異步的
  actions:{
    // 第一個(gè)參數(shù)直接以store接收
    changeNumFun(store){
        setTimeout( function(){ // 模擬異步操作，實(shí)際值是時(shí)時(shí)改變的
          store.commit('changeNum');
        }, 100);
    },
    //第一個(gè)參數(shù)以commit接收，第二個(gè)參數(shù)只能有一個(gè)，如果多個(gè)值定義成對(duì)象
    changeNumFun2({commit}, num){
      commit('changeNum2', num)
    },
    // 異步操作 await等待返回
    async changeNumFun3(store){
      console.log('開(kāi)始fun3');
      var data = await store.dispatch('changeNumFun4');
      console.log(data);
      console.log('結(jié)束開(kāi)始fun3');

      // 打印結(jié)果： 開(kāi)始fun3、{'id': '111', name: 'zsstore'}、結(jié)束開(kāi)始fun3
      // 如果不使用await data輸出放在最后
    },
    changeNumFun4(store){
         return new Promise(resolve => {
            setTimeout(() => {
              var data = {'id': '111', name: 'zsstore'};
              resolve(data);
            }, 1000);
        });
    }
  }
});
// 導(dǎo)出
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>
  // 導(dǎo)入state
  import { mapState } from 'vuex'
  //導(dǎo)入mapMutations
  import { mapMutations } from 'vuex'
  // 導(dǎo)入mapActions
  import { mapActions } from 'vuex'
  // 導(dǎo)入mapGetters
  import { mapGetters } from 'vuex'
  //以上導(dǎo)入vuex各個(gè)模塊，在本組件中通過(guò)映射方式定義，就可以以this.XXX來(lái)操作，否則就要this.$store.XXX來(lái)操作

  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(){
          // 通過(guò)commit提交mutations改變state值
          //this.$store.commit('changeNum')

          // 通過(guò)mapMutations注入，直接this調(diào)用即可
          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('調(diào)用完畢后事件...');
        },
        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);
          // 通過(guò)
          console.log(this.getNum2);
        }
    },
    created(){
      console.log(this.$store.state.num);
    }
  }
</script>