前言
前面兩篇文章，講解了 vuex 的一些基本操作。其中提到幾個方法，一是組件訪問 state，使用this.$store.state；二是組件觸發 mutations 使用this.$store.commit；三是組件觸發 actions 使用 this.$store.dispatch；四是訪問 getters 使用 this.$store.getters。這些只是訪問 store 的一種方式。
訪問 store 還有一種方法，就是使用模塊化，將 store 中的各個部分導入組件，其實就是mapState、mapGetters、mapMutations、mapActions四個方法的使用。
state 與 getters
在之前的“起步”一文中，講到 store 中的數據在任何組件修改后都會在 store 進行同步更新并發射給各個組件。這其實就是 Vue 的數據響應性。在之前，我們并沒有提及 state 的一個關鍵的使用方法——計算屬性中使用，而是直接使用了 this.$store.state方法訪問全局狀態。這本沒有什么錯誤，但如果你嫌每次都要多打幾個單詞很麻煩，就可以用到計算屬性了。
計算屬性 computed 的強大之處在于，它可以對響應式數據進行緩存，可以節約很大一部分性能。它只會在數據更新后執行某些方法，如果數據沒有發生改變則直接返回結果，不會重復執行計算。
那么，將 state 中的狀態放在 computed 中無疑是一個非常好的選擇。
computed: {
count () {
return this.$store.state.conut
}
}
到這里，你覺得很不錯了。但問題在于，如果狀態多且雜時，computed 里也會變得非常臃腫，不利于你去處理其他必要的邏輯。你也許覺得，那還是直接使用this.$store.state吧。但 Vuex 為我們提供了另一個好用的訪問 store 的方法。就是前面提到的 mapXXXX 方法。
// 訪問 state 與 getters
// 首先在 script 頂部引入 mapState 與 mapGetters 函數
<script>
import { mapState, mapGetters } from 'vuex'
export default {
data () {
return {}
},
// 在 computed 屬性里使用 ES6 語法：展開運算符
computed: {
...mapState(['count'])
...mapGetters(['countFiltered'])
}
}
</script>
注意，map 函數里是一個數組，且每一項狀態的名字都是字符串。使用這種方法，有再多的狀態也可以快速映射到組件里，并且 computed 屬性里十分干凈整潔，也不用再重復敲擊 this.$store了。
mutations 與 actions
與 state、getters 不同，mutations 與 actions 是改變狀態的方法，所以這二者是在 methods 里使用。同樣的，先引入mapMutations與mapActions：
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
data () {
return {}
},
methods: {
...mapMutations(['SaveCount'])
...mapActions(['SaveCountAsync'])
}
}
</script>
如果需要觸發 mutations 與 actions 里的函數，直接使用 this 調用即可：
methods: {
...mapMutations(['SaveCount'])
...mapActions(['SaveCountAsync'])
submit () {
// 直接調用即可，有需要傳遞的參數，直接傳遞
this.SaveCount(可選傳遞的參數)
}
}
后記
map 方法有著一定的便捷性，但每個組件都要引入這幾個方法確實比較麻煩，直接使用this.$store有著更高的效率。但這幾個方法并沒有太大的區別，使用什么完全取決于你的選擇。
相信大多數人會選擇后者，但某些時候，mapState 與 mapGetters 確實比較方便，在狀態的訪問上會少寫很多代碼。但也有人認為使用$store會讓人一看到這個數據就知道是全局狀態，利于區分全局狀態與局部狀態。
還是那句話，這兩種方法說不上孰優孰劣，如何使用完全看你的喜好。
