vuex项目是一直在使用,但是当系统业务需求增加,需要维护的状态越来越多时,就会难以管理,这时就考虑将store模块化(module),每个模块都会拥有自己的 state、mutation、action、getter
基本使用
1、在项目中的 store 文件夹下新建一个文件夹 modules
2、在modules文件夹中先定义两个模块,AModule,BModule
Amodule/index.js
const AModule = {
state: () => ({
username: '张三'
}),
getters:{
usernameHandle(state){
return '名称:' + state.username;
}
}
}
export default {
...AModule
}
BModule/index.js
let BModule = {
state: () => ({
count: '2'
}),
getters: {
countHandle(state){
return '订单' + state.count
}
}
}
export default {
...BModule
}
3、在store中引入模块
import AModule from './modules/AModule'
import BModule from './modules/BModule'
export default new Vuex.Store({
modules: {
AModule,
BModule
}
})
至此我们已经完成了基本的模块化,接下来我们看看如何使用它
<template>
<div>
<!-- 使用 AModule 模块中的 state 需要通过 $store.state.AModule.xx -->
<h2>{{$store.state.AModule.username}}</h2>
<!-- 使用 AModule 模块中的 getters 通过 $store.getters.xx 不需要带上AModule模块名-->
<h2>{{$store.getters.usernameHandle}}</h2>
</div>
</template>
至于原因呢,是因为默认情况下,模块内部的state是注册在局部命名空间的,而 action、mutation、getter 是注册在全局命名空间,也就是为什么获取 getters 的时候不需要带上homeModule模块名,而 state 需要带上模块名