文 / 西打藍 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 就好，才不會動到彼此的架構。
閱讀量次
聯絡與合作
有文字採訪、網站開發，或是諮詢需求，皆可至個人網站參考作品，並聯繫 IG。
或是想分享心情、聊聊天、交朋友，可以來秘密通道找我唷。
Email: frank@siddharam.com
訂閱：