Vuex 组织文件结构
概述
由于 state 、getters 、mutations 、actions 和 modules 都放在 store 文件夹的 index.js 文件内，不便于后期维护。故将 index 文件内容进行抽离。
文件结构
文件内容
store/index.js
import Vue
from 'vue'
import Vuex
from 'vuex'
import module_a
from "@/store/modules/module_a";
import module_b
from "@/store/modules/module_b";
import getters
from "@/store/getters";
import mutations
from "@/store/mutations";
import actions
from "@/store/actions";
Vue
.use(Vuex
)
const store
= new Vuex.Store({
state
: {
data_1
: 1,
data_2
: 2,
data_3
: 3
},
getters
,
mutations
,
actions
,
modules
: {
a
: module_a
,
b
: module_b
}
})
export default store
store/getters.js
export default {
total(state
) {
let total
=0
for(let key
in state
){
total
+= state
[key
]
}
return total
}
}
store/mutations.js
export default {
increment(state
) {
state
.data_1
++
}
}
store/actions.js
export default {
asyncIncrement(context
) {
setTimeout(()=>{
context
.commit('increment')
}, 1000)
}
}
store/modules/module_a.js
export default {
state
: ()=>{
}
}
store/mudules/module_b.js
export default {
state
: ()=>{
}
}
