簡(jiǎn)單的說(shuō)就是存放一些項(xiàng)目里常用值的地方。如導(dǎo)航菜單，人員信息，地區(qū)信息等。

• 該狀態(tài)值為響應(yīng)式的，即數(shù)值發(fā)生變化時(shí)所有引用的頁(yè)面渲染也會(huì)發(fā)生變化。

關(guān)于幾個(gè)核心概念的簡(jiǎn)單解釋：

• state 數(shù)據(jù)存儲(chǔ)的地方。
• getters 用于幫我們過(guò)濾state里的數(shù)據(jù)。如我們只需要拿state下某個(gè)對(duì)象的id就可以通過(guò)getters實(shí)現(xiàn)。
• mutation 我們可以通過(guò)commit一個(gè)mutation來(lái)修改 state 里的值。必須為同步的，防止多地同時(shí)修改倉(cāng)庫(kù)的值。
• action 用來(lái)提交一個(gè)mutation 不過(guò)是可以異步的。我們可以在axios 調(diào)用接口成功后來(lái)處理這個(gè)數(shù)據(jù)。通過(guò)store.dispatch()來(lái)觸發(fā)
• modules 用于數(shù)據(jù)量過(guò)大時(shí)，進(jìn)行數(shù)據(jù)劃分。

1、state官網(wǎng)詳解

在組件中，我們可以通過(guò)在根實(shí)例注冊(cè)。在計(jì)算屬性中通過(guò)this.$store.state來(lái)訪問(wèn)。
代碼示例：

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

為了簡(jiǎn)化多個(gè)狀態(tài)值引用寫(xiě)法冗余的問(wèn)題，可以通過(guò)mapState輔助函數(shù)來(lái)引入。

 computed: mapState({
    // 箭頭函數(shù)可使代碼更簡(jiǎn)練
    count: state => state.count,

    // 傳字符串參數(shù) 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

key,value相同時(shí)，可以傳一個(gè)數(shù)組：

computed: mapState([
  // 映射 this.count 為 store.state.count
  'count'
])

2、getters詳解
接收第一個(gè)參數(shù)為state，可以接收第二個(gè)參數(shù)。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

可以調(diào)用其他getter:

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

同樣的，處理批量可以用mapGetters：

  computed: {
  // 使用對(duì)象展開(kāi)運(yùn)算符將 getter 混入 computed 對(duì)象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }

3、mutation詳解

• 可以接收參數(shù)，對(duì)象

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

4、action詳解
常用于 axios 請(qǐng)求接口后處理數(shù)據(jù)。例如購(gòu)物車：

actions: {
  checkout ({ commit, state }, products) {
    // 把當(dāng)前購(gòu)物車的物品備份起來(lái)
    const savedCartItems = [...state.cart.added]
    // 發(fā)出結(jié)賬請(qǐng)求，然后樂(lè)觀地清空購(gòu)物車
    commit(types.CHECKOUT_REQUEST)
    // 購(gòu)物 API 接受一個(gè)成功回調(diào)和一個(gè)失敗回調(diào)
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失敗操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

在組件中分發(fā)action：

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')`

      // `mapActions` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
    })
  }
}

多個(gè)action之前調(diào)用可以通過(guò) async/await來(lái)實(shí)現(xiàn)：

// 假設(shè) getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}