VueX 模块化和namespace

逸省

关注

阅读 58

2023-11-05

当我们的项目很大的时候,VueX中的代码会越来越多,会有处理数据的,处理人员列表的,处理订单的...

如果我们将这些东西都写在一个state、actions和mutations中的话,就非常不方便后期的维护。

所以我们引入了VueX的模块化的概念,每一个模块存储对应操作的数据和方法,方便后期的维护。

一、创建模块化

我们将不同功能区间组成不同的模块,每一个模块中都有与之对应的state, getters, actions, mutations。

我们也可以将一个模块放在一个js文件中进行暴露,然后在index.js中引入

二、注册模块

三、读取模块中的数据

(一)读取state中的数据

1. 直接读取

 

2. mapState读取

 

(二)读取getters中的数据

1. 直接读取

2. mapGetters读取

 

(三)调用dispatch

1. 直接读取

2. mapActions读取

 

(四)调用commit

使用方法和调用dispatch一致

1. 直接读取

2. mapMutations读取 

精彩评论(0)

0 0 举报