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