Vuex中的Vuemapgetters

在Vuex中，MapGetters可以使得在組件中訪問Vuex store的getters函數變得更加容易。這篇文章將會從以下幾個方面就Vuemapgetters進行詳細地闡述。

一、映射多個Getters到計算屬性

...mapGetters([
  'getters1',
  'getters2',
  'getters3'
])

上述代碼就是將組件中的computed屬性映射到store中的多個getter函數。上面的代碼與下面的代碼是等價的：

computed: {
  ...Vuex.mapGetters([
    'getters1',
    'getters2',
    'getters3'
  ])
}

為了將多個Getters映射到組件中，你可以傳遞一個數組到該映射函數中。這使得我們可以使用不同的格式與組件相關的計算屬性實現更好的靈活度。

二、使用對象映射Getters到計算屬性

...mapGetters({
  getter1Alias: 'getters1',
  getter2Alias: 'getters2'
})

上述代碼與下面的代碼是等價的：

computed: {
  getter1Alias: Vuex.mapGetters('getters1'),
  getter2Alias: Vuex.mapGetters('getters2')
}

對象映射方式是另一種組合多個Getters的方式，該方法允許我們使用更有意義的別名來表示各個Getters。

三、在繼承getters的同時在計算屬性中增加自己的getter函數

...mapGetters({
  getter1Alias: 'getters1',
  getter2Alias: 'getters2',
  myAwesomeGetter: state => {...}
})

使用對象方式映射Getters可以允許我們在映射getter函數時添加自定義的getter函數。一旦getter在store中註冊了會自動被Vuex計算。你可以想象一下傳入的函數會被添加到store的getters中，就像下面這個例子：

const store = new Vuex.Store({
  state: {...},
  getters: {
    getters1: state => {...},
    getters2: state => {...},
    myAwesomeGetter: state => {...}
  },
  actions: {...},
  mutations: {...}
})

四、使用命名空間

使用命名空間使得我們可以為組件關聯上一個特定module的actions和mutations，但是默認情況下，它不能為getter函數提供這樣一種映射。相對地，用戶必須將getter函數與正確的module名稱拼接起來來實現映射，就像這個例子：

...mapGetters('myModule/', {
  getter1Alias: 'getters1',
  getter2Alias： 'getters2'
})

上述代碼與下面的代碼是等價的：

computed: {
  getter1Alias: Vuex.mapGetters('myModule/', 'getters1'),
  getter2Alias: Vuex.mapGetters('myModule/', 'getters2')
}

這種情況下，去除命名空間的映射方式不會起作用，所以必須使用module名稱。

五、結論

Vuemapgetters應該是Vuex中最重要的一個策略，因為它使得在組件中訪問store的getters函數變得更加容易。通過多個Getters與計算屬性的映射，對象映射方式等，我們可以使用不同的技巧來使用它，當然相比於去除命名空間的映射方式，使用命名空間的方式更加的有效和準確。