Vuex分模块使用

前言

最近在做练手项目时，把vuex分模块进行了管理。但是对于语法的不熟悉，导致漏洞百出。这两天结合了vuex的官方文档，操作了一下分模块下，如何读取state、getters、actions等，如下是记录过程。

为什么分模块

之前看的代码，是把所有state、getters、actions写在一个文件，由于项目较大，感觉逻辑有点乱，于是可以利用分模块的办法，給每一个模块单独的state、getters、actions等，从而使得逻辑结构清晰。

案例代码

说明

如下图所示，我主要是分了两个模块a、b，分别在vue组件里测试了下面四种情况，一般来说不会通过a模块去修改b模块的。再用语法糖…mapGetters、…mapState、…mapActions分别访问。

每个module下都有自己的actions、getters、mutations、state等，moduleA|B/index.js的内容如下

import actions from './actions'
import state from './state'
import getters from './getters'
import mutations from './mutations'

export default {
   
  // 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应，指定命名空间可以
  // 如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名
  namespaced: true,
  state,
  actions,
  getters,
  mutations
}
// 向外暴露对象，可以自定义名字接收 export default

最外层的index.js内容如下：