vuex模块化 怎么引用state_Vuex 模块化使用详解

前言 上回我们说了一下 vuex 的简单使用，最后面的时候有说了，由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割，今天我们也来简单了解一下他的使用，深入学习可能还是要去看官方文档

1 文件结构

文件结构的话，模块化的使用要多一个 modules 的文件夹，里面放着细分模块的 js 文件/模块名文件夹。

这里官方的标准是一个模块一个 js 文件，但是要是模块太复杂的话，也可以把里面的代码拆分出来。

// store 文件夹

│ actions.js

│ getters.js

│ index.js

│ mutations.js

│ state.js

│

└─modules

│ moduleB.js

│

└─moduleA

index.js

mutation.js

state.js

然后在创建 store 的 js 文件中引入这些模块，直接

import moduleA from './modules/moduleA/index'

import moduleB from './modules/moduleB';

export default new Vuex.Store({

state,

getters,

mutations,

actions,

modules: {

moduleA,

moduleB,

}

});

2 模块的局部状态对象的定义

模块内部的 getter，mutation 和 action，他们方法接收的参数会和根状态的不一样，我们一个一个来

getter

getter 的话，他会有三个参数，第一个是模块内的 state，第二个是 模块内的 getters，第三个是根节点状态 rootState，

const getters &