【Vue2】Vuex Actions

接續上一篇【Vue2】Vuex Mutations 深入理解，這一篇來介紹 Actions 的用法。

Actions 跟 mutations 很像，但有幾點不同：

• 相較於 mutations 呼叫 state，Actions 則是呼叫 mutation。
• 可以執行非同步（Asynchronous）函式。

在元件裡呼叫 Actions

相較於呼叫 mutations 使用 store.commit() 如果我們要在元件裡呼叫 actions 函式則是使用：

store.dispatch("myFunction");

如果要一次引入很多 actions 函式，則可以使用 mapActions 來簡化程式碼：

<script>
  import { mapActions } from "vuex";
  export default {
    methods: {
      ...mapActions(["increment", "decrement"]),
    },
  };
</script>

在 Store 建立 Actions

在建立 mutations 時，我們會把 state 傳入去做處理：

store/index.js

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
});

而 actions 則是會傳入一個 context 的物件，他有四個屬性可以使用：

• context.state
• context.commit
• context.getter
• context.dispatch

getter 我們之後再來介紹，先來看一下其他三個屬性

1. context.state

也就是 store 裡面的 state，雖然也可以像 mutations 一樣，更改 state 的值，但是為了區分不同的功能性，大部分還是會把 state 的更改權交給 mutations，在 actions 裡都只會讀取 state 的值而不會改變他。

2. context.commit

用來呼叫 mutations 的函式，傳入函式名且只會在 actions 裡面呼叫。

store/index.js

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    incrementOne(context) {
      context.commit("increment");
    },
  },
});

3. context.dispatch

跟在元件呼叫 actions 功能一樣，只是變成在 actions 裡面呼叫裡面的函式：

store/index.js

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    incrementOne(context) {
      context.commit("increment");
    },
    increment(context) {
      ...
      context.dispatch("incrementOne");
    },
  },
});

提示

在 ES6 之後，就可以使用解構賦值的方式，讓程式碼更簡化

store/index.js

export default new Vuex.Store({
  actions: {
    increment({ state, commit, getter, dispatch }) {
      commit("increment");
    },
  },
});

在 Actions 使用非同步函式

下面的範例就是使用 Actions 來處理非同步函式來抓狗狗的圖片路徑：