iT邦幫忙

2021 iThome 鐵人賽

DAY 18
0
Modern Web

Vue.js 什麼意思系列 第 18

Day 18:產地直送,先拿再用-Vuex State、Getters

承上篇從 Actions 進展到 Mutations,接下來讓 Mutations 將結果直接賦值給 State,繼續接棒完成 Vuex 狀態存取流程!

State 產地直送

  • 存取 state 只透過 mutations 和 getters:

    • 只有提交 mutation 才能改變 state,並且接收 mutation 直送的原始資料
    • 只有透過 getter 才能取得 state
  • 在被 mutation 改變之前,最好先設定預設值,完成初始化屬性。

    state: {
        bookList: {},
    },
    
  • Vuex.Store 實例屬性 store.state 只能讀取 root state object
    若有模組化可進一步讀取模組內的 state 狀態

Getters 先拿再用

  • 只有透過 getter 才能取得 state,並依取用需求在 getter 中進行資料處理。

  • getter 作為 Store 的計算屬性,回傳值會隨著依賴值發生改變才會被重新計算。

  • getter 函式第一個參數為 state,第二個參數為 getters(引用模組內的其他 getters)。

    getters: {
        bookList: (state) => state.bookList.list,
        bookUpdate: (state) => state.bookList.updatedAt,
    },
    

    若為模組化形式,則可再取用第三個參數 rootState 和第四個參數 rootGetters
    若只想取用第三個參數,前兩個參數一樣要設置,因為其判斷參數是依照引用順序。

    getters: {
        // 取用 root 的 state
        bookQuantity: (state, getters, rootState) 
    				=> rootState.quantity,
    
        // 取用另一個模組的 state
        discountBookList: (state, getters, rootState) 
    				=> rootState.anotherModule.list,
    },
    
  • Vuex.Store 實例屬性 store.getters 只能讀取所有註冊的 getter object
    透過屬性訪問的 getter,會作為 Vue 響應式系統的一部份而被緩存(cached)。

    console.log(this.$store.getters);  // 顯示註冊的 bookList 和 bookUpdate
    console.log(this.$store.getters.bookUpdate);  // 1632672007
    

    store.getters

  • 透過方法訪問的 getter,會在每次被訪問時調用方法,而不會緩存結果。

    getters: {
      // ...
      getBookListByISBN: (state) => (ISBN) => {
        return state.books.find(book => book.ISBN === ISBN)
      }
    }
    
    store.getters.getBookListByISBN(9789867794529)
    // -> { ..., "name": "深入淺出設計模式", "ISBN": "9789867794529" }
    

補充:物件解構賦值範例

以我們最熟悉的 console 物件為例,其本身也包含許多方法。
console object

試著對 console 進行解構賦值。

const { log, warn } = { log: '[Function: log]', warn: '[Function: log]' }
console.log(log);

const { error } = console;
error('console.error');
console.error('error');
// error() = console.error()

console result
依此類推,希望有幫助到大家理解上篇 action 中的 context 物件解構,後續也會應用到 v-slot 上。

參考資料


上一篇
Day 17:異步行動,同步變動-Vuex Actions、Mutations
下一篇
Day 19:有名模組,無限輔助-Vuex Modules、Map Helper
系列文
Vue.js 什麼意思30

尚未有邦友留言

立即登入留言