vuex action 與mutations 的區別

面試沒說清楚。這個太丟人回來整理下：

事實上在 vuex 里面 actions 只是一個架構性的概念，並不是必須的，說到底只是一個函數，你在里面想干嘛都可以，只要最后觸發 mutation 就行。異步競態怎么處理那是用戶自己的事情。

Vuex.Store({
  state,
  actions,
  mutation
});

vuex 真正限制你的只有 mutation 必須是同步的這一點,在vue中，

只有mutation才能正真改變VUEX stroe中的state,

　Action 提交的是 mutation，而不是直接變更狀態。

   Action 可以包含任意異步操作。 個人覺得這個action的 產生就是 因為mutation 不能進行異步操作，如果有異步操作那么就用action 來提交mutation

Mutation 必須是同步函數
一條重要的原則就是要記住 mutation 必須是同步函數。為什么？請參考下面的例子：

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}
現在想象，我們正在 debug 一個 app 並且觀察 devtool 中的 mutation 日志。每一條 mutation 被記錄，devtools 都需要捕捉到前一狀態和后一狀態的快照。
然而，在上面的例子中 mutation 中的異步函數中的回調讓這不可能完成：因為當 mutation 觸發的時候，回調函數還沒有被調用，
devtools 不知道什么時候回調函數實際上被調用——實質上任何在回調函數中進行的狀態的改變都是不可追蹤的。

在組件中提交 Mutation

你可以在組件中使用 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` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
    })
  }
}

如果想要獲取對應的狀態你就可以直接使用this.$store.state獲取，當然，也可以利用vuex提供的mapState輔助函數將state映射到計算屬性中去，如.

const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 變更狀態 state.count++ } } })

Action去comit一個mutation。它要指定去commit哪一個mutation，然后指定結束之后要做什么什么事情就要給出一個函數，所以說mutation的構成有兩點名稱和函數。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

action 異步操作

actions: {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}