• 在使用Vuex的時候通常會創建Store實例new Vuex.store({state,getters,mutations,actions})有很多子模塊的時候還會使用到modules。

• 

• 總結，Store類就是存儲數據和管理數據方法的倉庫，實現方式是將數據和方法以對象形式傳入其實例中。要注意一個應用或是項目中只能存在一個Store實例！！

 import {mapState} from 'vuex' export default {computer :mapState({count: state => state.count,'count' // 映射 this.count 為 store.state.count})
}

import?{ mapGetters }?from?'vuex'

computed: {// 使用對象展開運算符將 getters 混入 computed 對象中...mapGetters(['doneTodosCount','anotherGetter',])}//給getter屬性換名字mapGetters({// 映射 this.doneCount 為 store.getters.doneTodosCountdoneCount: 'doneTodosCount'
})

• getters是為了初步獲取和簡單處理state里面的數據(這里的簡單處理不能改變?state里面的數據)，Vue的視圖是由數據驅動的，也就是說state里面的數據是動態變化的，那么怎么改變呢，切記在Vuex中store數據改變的唯一方法就是mutation！

• 通俗的理解mutations,里面裝著一些改變數據方法的集合，這是Veux設計很重要的一點，就是把處理數據邏輯方法全部放在mutations里面，使得數據和視圖分離。

• mutation結構：每一個mutation都有一個字符串類型的事件類型(type)和回調函數(handler)，也可以理解為{type:handler()},這和訂閱發布有點類似。先注冊事件，當觸發響應類型的時候調用handker()，調用type的時候需要用到store.commit方法。

   const store = new Vuex.Store({state: {count: 1},mutations: {increment (state) {      //注冊事件，type:increment，handler第一個參數是state；// 變更狀態state.count++}}})store.commit('increment')   //調用type，觸發handler（state）     

• 載荷（payload）:簡單的理解就是往handler(stage)中傳參handler(stage,pryload)；一般是個對象。

    mutations: {increment (state, n) {state.count += n}}store.commit('increment', 10)

• mutation-types：將常量放在單獨的文件中，方便協作開發。

      // mutation-types.jsexport const SOME_MUTATION = 'SOME_MUTATION'// store.js
  import Vuex from 'vuex'
  import { SOME_MUTATION } from './mutation-types'const store = new Vuex.Store({state: { ... },mutations: {// 我們可以使用 ES2015 風格的計算屬性命名功能來使用一個常量作為函數名[SOME_MUTATION] (state) {// mutate state}
  }
  })

• commit：提交可以在組件中使用?this.$store.commit('xxx')?提交?mutation，或者使用?mapMutations?輔助函數將組件中的?methods?映射為?store.commit?調用（需要在根節點注入?store）。

  import { mapMutations } from 'vuex'export default {methods: {...mapMutations(['increment' // 映射 this.increment() 為 
  this.$store.commit('increment')]),...mapMutations({add: 'increment' // 映射 this.add() 為 
  this.$store.commit('increment')})}}

• 定義actions

  const store = new Vuex.Store({//創建store實例state: {count: 0},mutations: {                increment (state) {state.count++}},actions: {         //只是提交`commit`了`mutations`里面的方法。increment (context) {context.commit('increment')}}})一般我們會簡寫成這樣actions: {increment ({ commit }) {commit('increment')}}

• 分發actions

  store.dispatch('increment')

• MapActions和MapState一級MapMutations類似。

Modules

• 背景：在Vue中State使用是單一狀態樹結構，應該的所有的狀態都放在state里面，如果項目比較復雜，那state是一個很大的對象，store對象也將對變得非常大，難于管理。

• module：可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理。

• 一般結構

  const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }}
  const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }}const store = new Vuex.Store({
    modules: {
      a: moduleA,
      b: moduleB})

• 模塊內部的數據：①內部state，模塊內部的state是局部的，也就是模塊私有的，比如是car.js模塊state中的list數據，我們要通過this.$store.state.car.list獲取；②內部getter、mutation和action，仍然注冊在全局命名空間內，這是為了多模塊可以同時響應同一mutation；this.$store.state.car.carGetter的結果是undefined，而通過this.$store.state.carGetter則可以拿到。

• 傳參：getters====({state(局部狀態),getters（全局getters對象）,roosState（根狀態）})；actions====({state(局部狀態),commit,roosState（根狀態）}).