## 一、適用情況 >[danger] > 1、一般情況下，只有組件之間共享的數據，才有必要存儲到vuex中，對于組件中私有的數據，存儲在組件自身的data中； > 2、全局單例模式管理，某個狀態，全局共享方可納入； > 3、如果有些狀態嚴格屬于單個組件，最好還是作為組件的局部狀態； ## 二、訪問State方式 1、直接訪問this.$store.state.全局數據名稱 ~~~ computed: { count () { return store.state.count } } ~~~ 2、mapState將當前組件需要的全局數據，映射為當前組件的計算屬性 ~~~ // 從vuex中按需導入mapState函數 import {mapState} from 'vuex' ...... // 將全局數據，映射為當前組件的計算屬性 computed: { ...mapState(['count']) } ~~~ ## 三、修改State 1. **只能**通過`mutation`變更`Store`數據，不可以直接操作`Store`中的數據。 2. 通過這種方式雖然操作起稍微繁瑣一些，但是可以集中監控所有數據的變化； 3. action實際上也還是調用mutation來變更store數據； ## 四、使用Getters的方式 1、直接使用this.$store.getters.名稱； ~~~ computed: { doneTodosCount () { return this.$store.getters.doneTodosCount } } ~~~ 2、mapGetters將需要的getters直接映射到組件的計算屬性中，直接使用； ~~~ import { mapGetters } from 'vuex' computed: { ...mapGetters(['showNum']) } ~~~ ## 五、觸發Mutations（同步操作）方式 1、直接調用this.$store.commit()； ~~~ methods: { add(){ this.$store.commit('increment') } } ~~~ 2、mapMutations將需要的`mutations`函數，映射為當前組件的`methods`方法，就可以直接在methods方法里面調用了； ~~~ // 從vuex中按需導入mapMutations函數 import {mapMutations} from 'vuex' ...... methods: { ...mapMutations(['add','addN']) } ~~~ ## 六、觸發Action（異步操作）方式 1、直接調用this.$store.dispatch； ~~~ methods: { add(){ this.$store.dispatch('increment') } } ~~~ 2、mapActions將需要的`actions`函數，映射為當前組件的`methods`方法，就可以直接在methods方法里面調用了； ~~~ // 從vuex中按需導入mapActions函數 import {mapActions} from 'vuex' ...... methods: { ...mapActions(['addAsync','addNASync']) } ~~~