vuex模块化

143 阅读1分钟

Vuex中有5个核心的概念:

1.state:公共数据状态存储

2.mutations:唯一操作state状态的方法

3.actions:触发mutations,进行对state状态的修改(此时可以进行一些异步操作)

4.getters:可以对state进行一些过滤操作,而不影响原state数据(使用JSON拷贝)

5.modules:可以对store进行一些模块划分,功能划分,达到便于管理的目的

今天说一下modules 模块化

什么是modules

在Vuex中State的使用是一个单一的状态树结构,应该把所有的数据状态都放在state里面,如果项目比较复杂,那么state就是一个很大的对象了,store对象也将变得非常大,难于管理。

modules可以让每一个模块都拥有自己的state、mutation、action、getters,这样的话,数据结构层级会变得非常清晰,方便管理

1.在src下创建 modules 文件夹

图片.png

2.index.js为总的引用文件  ,  引入 modules文件下各个模块 并暴露出去

图片.png

图片.png

3、在vue文件中访问

图片.png

图片.png