March 17, 2020

vuex 進階教學:Module、Getter

模組化及複用函數


文 / 西打藍 Siddharam

前言


接續上回〈vuex 教學:vue 的狀態管理工具〉教學後,這次要延伸筆記 Module、Getter 的使用,也包含較進階的用法,如果已經學完上一版的教學,其實就很夠用了。那我們就開始吧。

vuex 進階


Module 模組化。當你的狀態過多且複雜時,就可以考慮運用 Module 來做切割,讓每個 Module 擁有自己的 state、mutation、action、getter,方法很簡單:



// store/index.js
// 官網教學範例

...
...

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

...
...



你也可以用資料夾分層,會更好維護:



store  /  index.js
       /  module   /  header  /  index.js
                              /  mutation.js
                              /  action.js
                              /  getter.js
                   /  footer  /  index.js
                              /  mutation.js
                              /  action.js
                              /  getter.js







store/index.js

...
...

import Vue from 'vue'
import Vuex from 'vuex'
import header from './modules/header'
import footer from './modules/footer'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    header,
    footer
  },
  state: {
  },
  mutations: {
  }
})


...
...



在 Module 中加入了 namespaced,Vuex 會在 Module 的 action、mutation、getter 加上 prefix。



store/module/header/index.js

...
...


import actions from './actions'
import mutations from './mutations'
import getters from './getters'

export default {
  namespaced: true,
  state: {
    id: null,
    spec: {
      length: 0
    }
  },
  actions,
  mutations,
  getters
}


...
...



getter


再來是 getter,他讓你可以先行處理函式,功能類似於 computed,例如:



// store/index.js

...
...

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    // 你也可以引入其他 getter 使用
    doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
  }
})

...
...



當你要使用時:



// component/layout.vue

...
...

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

...
...



另外,也能透過 mapGetters 引入 getter 來使用:



// component/layout.vue

...
...

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters([
      'doneTodos',
      'doneTodosCount'
      // ...
    ])
  }
}

...
...



之前的專案,也幾乎沒用過 getter,通常是把它架好後,就放著閒置了。但 module 會用到,因為當多人共同開發系統時,只要維護各自的 module 就好,才不會動到彼此的架構。




閱讀量




聯絡與合作


訂閱電子報,領「我當前 10+ 以上收入源有哪些」一文。

有文字採訪、網站開發,或是諮詢需求,皆可至個人網站參考作品,並聯繫 IG

或是想分享心情、聊聊天、交朋友,可以來秘密通道找我唷。

Email: frank@siddharam.com