代码
提交代码
<!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: 18
},
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: 20
}
})
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>
运行结果