Vuex Modules定义

发布时间：2023-04-04 08:49:26 所属栏目：教程来源：

导读：在复杂的大型项目中，如果将所有的数据都存在一个 state 对象中，那将使得 store 对象变得非常大，难于管理。这时候，使用 module 将变得异常重要。Modules 并非难点，接下来我们就一步步介绍 modules 的使用。

M

在复杂的大型项目中，如果将所有的数据都存在一个 state 对象中，那将使得 store 对象变得非常大，难于管理。这时候，使用 module 将变得异常重要。Modules 并非难点，接下来我们就一步步介绍 modules 的使用。

Module 其实是一个对象，它和我们 new Vuex.Store ({…}) 传入的对象格式相同。例如：

const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。

const moduleA = {
state: { count: },
mutations: {
increment (state) {
// 这里的 `state` 对象是当前模块的局部状态
state.count++
}
},
getters: {
doubleCount (state) {
// 这里的 `state` 对象是当前模块的局部状态
return state.count *
}
}
}
同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState：

const moduleA = {
// ...
actions: {
incrementIfOddOnRootSum ({ state, commit, rootState }) {
if ((state.count + rootState.count) % === ) {
commit('increment')
}
}
}
}
对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：

const moduleA = {
// ...
getters: {
sumWithRootCount (state, getters, rootState) {
return state.count + rootState.count
}
}
}
完整示例：

<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div>模块 A 数量：{{moduleACount}}</div>
<div>根节点数量：{{rootCount}}</div>
<div>数量总和：{{countSum}}</div>
<button @click="addModuleCount">模块 A + 1</button>
<button @click="addRoottoModule">添加 root 至模块</button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>
<script type="text/javascript">
const moduleA = {
state: {
count:
},
getters: {
countSum(state, getters, rootState) {
return state.count + rootState.count
}
},
mutations: {
addModuleCount(state) {
state.count++
},
addModuleByCount(state, payload) {
state.count = state.count + payload.count
}
},
actions: {
addRoottoModule({state, commit, rootState}) {
commit('addModuleByCount', {count: rootState.count})
}
}
}
const store = new Vuex.Store({
modules: {
a: moduleA,
},
state: {
count:
}
})
var vm = new Vue({
el: '#app',
store,
computed: {
countSum() {
return this.$store.getters.countSum
},
moduleACount() {
return this.$store.state.a.count
},
rootCount() {
return this.$store.state.count
}
},
methods: {
addModuleCount() {
this.$store.commit('addModuleCount')
},
addRoottoModule() {
this.$store.dispatch('addRoottoModule')
}
}
})
</script>
</html>
代码解释
JS 代码第 4-26 行，我们定义了模块 moduleA。
JS 代码第 9-11 行，在 moduleA 定义 getter countSum。
JS 代码第 13-20 行，在 moduleA 定义 mutations。
JS 代码第 21-25 行，在 moduleA 定义 actions。
JS 代码第 27-34 行，我们定义了 store，并将 moduleA 传入 modules 的属性中。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!