Vuex 是個處理全域資料的狀態管理庫，採集中式管理方式，方便任何元件都能從中獲取狀態或觸發事件，實作上通常用來存儲 API 資料後再加以應用，尤其適合應用於開發中大型專案。

一圖以蔽之：

（圖片來源：Vuex - What is Vuex?）

Vuex 主要以四個核心概念——State、Getters、Mutations、Actions——所組成，另外包含 Modules 可再進行模組化。依循圖片的運行流程大致如下：

• 先在 action 發送 API 從後端取得資料後，傳遞給 mutation
• 提交 mutation 以改變 state，並且是唯一可以改變 state 的方法
• 一般會先在 state 設定預設值，經由 mutation 將資料賦值給 state 存放
• 先透過 getter 取得 state 資料，再到元件中引入 getter 並將資料渲染至畫面上
• 元件內也可呼叫 action，接著依序執行循環流程，便能隨時更新資料狀態及存取應用

原則上整個流程為單向循環，不可逆向，盡量避免越級（若遇處理同步或非同步問題時，也會有略過 action 直接呼叫 mutation 的情形發生）。

Actions 異步行動

• 處理非同步執行程序

• 需透過提交 mutation 才能改變 state

• 使用 dispatch 呼叫 action：回傳值為 promise
  dispatch(type: string, payload?: any, options?: Object): Promise<any>

  store.dispatch('fetchBookList', amount: 10)
  

• action 函式第一個參數為 context，第二個可選參數為 payload

  • context 物件包含：state、rootState、commit、dispatch、getters、rootGetters

    actions: {
    	fetchBookList (context) {
    		context.commit('bookList', books) // 相當於 store.commit()
    	}
    }
    

  • 可利用 ES6 參數解構（argument destructuring）簡化程式碼：

    actions: {
    	fetchBookList ({ commit }) {
    		commit('bookList', books) // 相當於 store.commit()
    	}
    }
    

Mutations 同步變動

• 處理同步執行程序

• 唯一可以改變 state 的方法，且單純只將結果直送並賦值給 state

• 使用 commit 呼叫 mutation
  commit(type: string, payload?: any, options?: Object)

  store.commit('bookList', books)
  

• mutation 函式第一個參數為 state，第二個可選參數為 payload

  mutations: {
      bookList(state, books) {
          state.bookList = books;
      },
  },
  

Vuex.Store 實例方法：dispatch 和 commit 的共通點

• 第三個可選參數（options?: Object）若設定為 { root: true }，便能取得命名模組（namespaced modules）中的 root actions 或 root mutations。

• payload 作為額外參數，通常會使用物件型別以包含多組資料而易於閱讀；
  若是以物件形式呼叫 commit／dispatch，則整個物件會作為 payload 傳遞給 mutation／action

  store.commit({
    type: 'bookList',
    data: books
  })
  

  mutations: {
      bookList(state, payload) {
          state.bookList = payload.data;
      },
  }
  

參考資料

• Vuex
• Vuex - Actions
• Vuex - Mutations
• Vuex - API Reference