需要說明的以下都不是我寫的，只是筆記，方便我看，記在紙上容易丟

vuex筆記：

寫的蠻好的，簡單易懂：連結。

1.state，共享狀態，相當於只讀屬性。在元件頁面，可以通過輔助函式在computed裡面接收，形式有物件如，mapState（{count：‘ ’}）。陣列形式接收如：computed: mapState(['count'])；

2.mutation，改變狀態的方法，只能通過mutation改變state狀態，store.commit()方法觸發mutation改變state；

3. getters，對state物件進行處理計算，方便在store中做集中的處理。getters接受state作為第一個引數，通過this.$store.getters呼叫，也可以接受其他getters作為第二個人蔘數。在元件頁面，使用computed接收，形式如下： computed: {...mapGetters(['countGetter'])}；

4.mutation,更改vuex的staore中的狀態的唯一方法就是mutations,每一個mutation都有一個事件型別type和一個回撥函式handler,呼叫mutation,需要通過store.commit方法呼叫mutation type,形式：store.commit('方法名')，也可以傳入第二個引數，就是mutation的payload，所以在mutaion:{中 funName(state, payload){對state進行處理操作}，

store.commit({type:'funName',aa:10,bb:20})，

nutaion的對映函式mapMutations，輔助函式簡化程式碼，在元件的methods對映為store.commit呼叫，寫法形式如下：

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment' // 對映 this.increment() 為 this.$store.commit('increment')
    ]),
    ...mapMutations({
      add: 'increment' // 對映 this.add() 為 this.$store.commit('increment')
    })
  }，
mutation必須為同步函式，非同步操作用actions
}

所以在vue的computed計算屬性中會存在兩種輔助函式：

import { mapState, mapGetters } form 'vuex';

export default {
    // ...
    computed: {
        mapState({ ... }),
        mapGetter({ ... })
    }
}

作者：Yeaseon_Zhang  
連結：https://juejin.cn/post/6844903470219149326
作者本人的部落格地址：https://yeaseonzhang.github.io/
來源：稀土掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。