• 需要用的頁面上：

1. import Action和 State進來
2. 透過methods調用mapActions
3. 透過computed調用mapState

• store配置Vuex：

1. Action透過commit來引入mutation
2. mutation改變state資料內容

• 程式碼部分：

• store：

export default new Vuex.Store({
  state: {
    accounts: []
  },
  mutations: {
    fetchAccounts: (state, payload) => {
      state.accounts = ["Edward", "Daisy"]
    }
  },
  actions: {
    fetchAccounts: ({ commit }) => {
      commit("fetchAccounts")
    }
  },
})

ps.這邊我的個人習慣，會將actions的函式名稱與mutation相同。這樣在管理上面，容易區分出哪一個actions是用來執行哪一個mutation。

• 頁面部分：

import { mapActions, mapState } from "vuex";
 
export default {
  name: "Home",
  components: {},
  methods: {
    ...mapActions(["fetchAccounts"]),
  },
  computed: {
    ...mapState(["accounts"]),
  },
};

元件或組件，透過methods去dispatch Store的Actions，並將回傳的結果傳回頁面上mapState，最後由computed運做出來。

使用時，僅需要引入在模板上即可：

<template>
  <div class="home">
    <button @click="fetchAccounts">Fetch Account</button>
    <br />
    <pre>結果顯示：{{ accounts }}</pre>
  </div>
</template>