iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
Modern Web

Vue.js 什麼意思系列 第 17

Day 17:異步行動,同步變動-Vuex Actions、Mutations

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

一圖以蔽之:

vuex
(圖片來源: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;
        },
    }
    

參考資料


上一篇
Day 16:axios 先封裝,API 輕鬆發
下一篇
Day 18:產地直送,先拿再用-Vuex State、Getters
系列文
Vue.js 什麼意思30

尚未有邦友留言

立即登入留言