Vuex基础(四):模块功能 modules

Vuex 的模块功能:

Vuex 是可以分模块的,因为在我们应用变的越来越大的过程当中,如果只有一个模块来维护我们的状态,那么可能你这个模块里面,它的内容就会变的非常多,非常的复杂,对于可维护性就不是那么高。那么这个时候,Vuex 就为我们提供了一个分模块的功能。

其实模块的使用方法,跟我们直接使用 Vuex 的方法差不多,但是它里面会有一些细节的内容来告诉我们具体怎么去做。

那么模块是什么呢?就是 modules。

在 modules 下面你可以申明各种不同的 state,mutations,getters,actions。

然后你可以给它这个模块加一个名字,那么你这个模块就会有一个作用域。比如:

这就是我们通过不同的模块去调用它的 state 的方法。

通过 a,b 它们的命名空间,来调用它们专属的一个 state。

这样的话,你有不同的模块,就可以非常清晰的去判断,你要去调用的是哪个模块的数据。

那么如果要通过 mapState 来进行调用呢?

我们就不能通过名字来调用属性了,必须通过一个对象的映射关系来进行书写。

mutations:

可以看到,我们也可以直接写到 mapMutations 里面去做,它是生效的。

那么我们为什么没有跟刚才调用 state 一样,它要申明一个模块下面的 mutations 呢?

这是因为 Vuex 默认会把所有的 mutations 都给它放到全局的命名空间当中。

如果你要让 a 模块里面的 mutations(它的命名空间是在a模块下面的)不跟我们全局的命名空间进行一个冲突,那么你需要申明一个属性 namespaced: true。

那么这有什么好处呢?这样的话,我们每一个模块里面,你都可以写相同名字的 mutations 和 actions。

因为在 Vuex 里面,你如果申明了2个相同名字的 mutations,那么它就是一个冲突的关系,你是不可能2个都同时存在的。

因为作为一个 object,同一个名字的变量,它就只能有一个。

所以,如果你的 mutations 会变的非常的多,而且你很难控制你每一个 mutations 的名字都是不一样的。那么你完全可以加上namespaced: true,如果你加上这个之后,你就会发现我们刚才的这种调用方法不对。

我们可以看到,Vuex 报错了,它不知道有这样一个mutation 的 type。

那这个时候,如果我们要调用这个 mutations,要怎么做呢?

我们要使用一个命名空间:

所以这就是一个命名空间的概念。

你可以强制给你的模块去加入一个命名空间,这样的话,它所有的 mutations,actions,getters 都是在一个命名空间下面。

它们不会起任何的冲突,所以你用的时候,也必须要在这个命名空间的下面。

这样的一个好处就是你整体的规范性会比较强。

我们要使用 getters,那么同样的我们要使用一个命名空间的方法:

但是这样的话,我们写在模版里面就会变的很奇怪,我们没有办法很好的去写,虽然说我们在方法里面可以进行一个调用。

这种调用方式明显的不太好,因为我们要直接在我们的模版里面去写,这样就写不来了。

那么我们可以给它命一个名,也就是说,我们这边的 mapGerrers,我们通过 object 的方式去做。

那么如果我们要在 a 模块下面的 getters,里面的 textPlus 方法里面,它依赖的值不仅仅是我们这个 a 模块里面的值,而是要全局模块下面的 state ,怎么做呢?

其实我们在模块下面的 getters 是会接收到我们全局的 state。

那么同样的,在我们的 actions 里面,我们也可以拿到这些东西。

可以看到,我们在这个 a 模块里面去 commit 的 mutations,它默认就是在我们当前这个模块里面的mutations。

也就是说,我们在 a 模块的这个 actions 里面,它 commit 的 updateText,它会自动在我们申明的 a 模块里面去找。

它不会到全局里面去找。如果你要去全局找,你需要加上一个参数 { root: true }。

所以这就是我们在模块内部,去调用全局的 mutations。

那么,同样的,你调用模块间的 mutations,你也要使用 { root: true },然后你要把命名空间给它写完整。

所以这就是我们在使用 Vuex 模块的时候要注意的一些点。

因为 Vuex 的模块功能其实非常的强大,它能够很好的帮我们去梳理代码。

但是我们加入了模块之后,因为有一个命名空间的存在,所以它的复杂度肯定会相应的增加。

如果这些细节的点你不知道,那么你会在开发的过程中,遇到非常多的坑要去踩。

然后大家还要注意一点的就是,我们在模块里面,还可以再去申明模块。

它是一个无限向下嵌套的过程,其使用方法也是跟上面一样的。

你每增加一层模块,那么你相应的复杂度就会增加一层,所以你要把这个逻辑给它理清楚。

发布了61 篇原创文章 · 获赞 3 · 访问量 4394

猜你喜欢

转载自blog.csdn.net/weixin_43921436/article/details/98660149