深入理解Vuex Modules

由于Vue在前端开发中的不断普及和广泛应用，应运而生的Vuex在全局状态管理上面提供了非常好的解决方案。在Vuex中，我们可以把应用中的状态集中到一个全局的存储区域并通过一些简单的规则来保证状态更改的可追踪、可维护和可扩展。

一、Vuex Modules的概念

在Vuex官方文档里面，对Module的定义是这样描述的：

一个 store 就是一个仓库，它的作用是管理共享状态并记录状态的变更。一个 store 里面包含着多个模块（module），也就是 Vuex 中的 Module。而每个模块都拥有自己的 state、mutation、action、getter。

可以理解为：模块就是Stroe里面的Store，是一个独立的、有状态管理的仓库。

将大型应用程序拆分成小型接受管理的模块，可以有效提升代码的可维护性和可读性。通过组合各种模块，形成需要的Store，这样就可以使用多个存储区域来管理应用程序的全局状态。

二、创建Vuex Modules

我们可以通过Vuex的核心对象store去创建我们自己的Modules，然后通过组合形成一个完整的Store。

举个栗子，比如我们的应用程序，需要分别管理一个主题和用户的状态。那么我们可以把他们分别拆分成两个模块去管理。

// theme module const theme = { state: { currentTheme: 'light' }, mutations: { setCurrentTheme (state, value) { state.currentTheme = value } }, actions: { setTheme ({ commit }, value) { commit('setCurrentTheme', value) } } } // user module const user = { state: { currentUser: null }, mutations: { setCurrentUser (state, value) { state.currentUser = value } }, actions: { setUser ({ commit }, value) { commit('setCurrentUser', value) } } } // create store with modules const store = new Vuex.Store({ modules: { theme, user } })

通过上面的代码，我们可以得知theme和user是两个独立的模块，它们分别管理自己的状态。然后我们把这两个模块通过modules选项传递进Vuex Store中，就可以创建一个完整的Store了。

三、Vuex Modules的Namespace

如果我们有多个模块管理相同的状态，那么在调用State或Action的时候，就会出现命名冲突。这个时候Vuex提供了一个很好的解决方案，那就是Namespace。

通过Namespace，我们可以给每个Module添加命名空间，来避免命名冲突。那么，我们如何为Module添加Namespace呢？请看下面的代码：

// theme module const theme = { namespaced: true, state: { currentTheme: 'light' }, mutations: { setCurrentTheme (state, value) { state.currentTheme = value } }, actions: { setTheme ({ commit }, value) { commit('setCurrentTheme', value) } } } // user module const user = { namespaced: true, state: { currentUser: null }, mutations: { setCurrentUser (state, value) { state.currentUser = value } }, actions: { setUser ({ commit }, value) { commit('setCurrentUser', value) } } } // create store with modules const store = new Vuex.Store({ modules: { theme, user } })

在上面的代码中，我们为每个Module设置了namespaced的属性为true，这样我们定义在该Module中的Action、Mutation、Getter和State才会成为全局命名空间里面的子命名空间，然后我们就可以通过模块名来访问相应的State或执行相应的Action了。

举个例子：

// Assigning State of theme module console.log(store.state.theme.currentTheme); // Assigning State of user module console.log(store.state.user.currentUser); // Dispatching Action of theme module store.dispatch('theme/setTheme', 'dark'); // Committing Mutation of user module store.commit('user/setCurrentUser', { name: 'Tom', age: 18 });

通过上面的代码，我们可以看到Vuex是如何管理这些Namespace的。直截了当，容易理解。

四、在组件中使用Vuex Modules

在组件中使用Vuex Modules，有两个方法，一个是通过MapState、MapMutations、MapGetters、MapActions简化代码，另一个是通过$this.$store来实现。

通过MapState、MapMutations、MapGetters、MapActions简化代码的思路，是通过绑定的变量名来让Vue知道哪些变量应该绑定到这个组件实例的属性上。

首先我们看通过MapState绑定State的方法：

<template> <div> <h2>Theme: {{currentTheme}}</h2> <button @click="setDark">Set Dark</button> </div> </template> <script> import { mapState } from 'vuex'; export default { computed: { ...mapState('theme', ['currentTheme']) }, methods: { ...mapActions('theme', ['setTheme']), setDark () { this.setTheme('dark') } } };</script>

在上面的代码中，我们可以通过…mapState(‘theme’, [‘currentTheme’])将当前Module的state的currentTheme和组件data中的property绑定起来。这样组件就可以直接使用this.currentTheme来访问状态了。

方法类似的，我们可以通过MapMutations、MapGetters、MapActions等来简化我们的代码。

其次，我们来看一下通过$this.$store来实现在组件中访问Vuex State、Mutations、Actions的方法。

在组件中，可以通过Store对象的commit()和dispatch()方法来访问state、mutation和action。可以通过$this.$store来访问到store对象。在具体使用的时候，可以使用“命名空间 / Action名/ Mutations名”等方式来访问相应的状态。举个例子：

// Assigning State of theme module console.log(this.$store.state.theme.currentTheme); // Assigning State of user module console.log(this.$store.state.user.currentUser); // Dispatching Action of theme module this.$store.dispatch('theme/setTheme', 'dark'); // Committing Mutation of user module this.$store.commit('user/setCurrentUser', { name: 'Tom', age: 18 });

可以看到，通过$this.$store属性，我们可以很轻松的去访问到任意一个Store中的State，提交Mutations，和分发Actions。

五、总结

Vuex模块(Module)是Vuex Store中管理States、Mutations、Actions、Getters等的关键概念。通过解耦大型应用程序，我们可以更好的去维护和扩展我们的应用程序。

在使用Vuex模块期间，我们会发现Namespace是非常受欢迎的概念。通过添加Namespace，可以更好的避免命名冲突，增加代码的可读性。

在组件中，我们可以通过MapState、MapMutations、MapGetters、MapActions、$this.$store等方式，来访问Store中的State、Mutations和Actions。具体使用仍需视情况而定。