vue 状态管理 五、Module用法
系列导航
vue 状态管理 三、Mutations和Getters用法
Module用法
一、基本知识
1、Module是模块的意思, 为什么在Vuex中我们要使用模块呢?
（1）Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
（2）当应用变得非常复杂时,store对象就有可能变得相当臃肿.
（3）为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等
2、代码组织形式
二、效果
页面中调用action中的方法
三、目录结构
四、源码
index.js
import { createStore} from 'vuex'
import moduleA from './modules/moduleA'
export default createStore({
state: {
counter: 0,
},
mutations: {
},
actions: {
},
getters: { },
modules: {
a: moduleA
}
})
moduleA.js
export default {
state: {
name: '张三'
},
mutations: {
updateName(state, payload) {
state.name = payload
}
},
getters: {
fullname(state) {
return state.name + 'AAAAAA'
},
fullname2(state, getters) {
return getters.fullname + 'BBBBBB'
},
fullname3(state, getters, rootState) {
return getters.fullname2 + rootState.counter
}
},
actions: {
aUpdateName(context,payload) {
console.log(context);
setTimeout(() => {
context.commit('updateName', payload)
}, 1000)
}
}
}
App.vue
<template>
<div >
<h2>----------App内容: modules中的内容----------</h2>
<h2>{{$store.state.a.name}}</h2>
<button @click="updateName">修改名字</button>
<h2>{{$store.getters.fullname}}</h2>
<h2>{{$store.getters.fullname2}}</h2>
<h2>{{$store.getters.fullname3}}</h2>
<button @click="asyncUpdateName">异步修改名字</button>
</div>
</template>
<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
components: {
},
methods: {
updateName() {
this.$store.commit('updateName', '李四')
},
asyncUpdateName() {
this.$store.dispatch('aUpdateName','王五')
}
},
setup() {
return {
}
}
}
</script>
