vuex 核心概念 modules || vuex 项目结构

前言：

为什么引入modules？ 不是已经有个完整的业务链了吗？

因为，store(vuex)是单一状态树，即唯一的数据源，一直在state里面添加数据，这样数据多了就臃肿了，倒不如把这些数据按逻辑打包成一个个模块，再放到state里面。
即，modules解决单一状态树的臃肿，提供数据的模块化。

modules基本使用：

// ./src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

//定义模块对象，供modules使用
const moduleA={
    
    
			state: {
    
     name: 'ss'},
			getters:{
    
    },
			actions:{
    
    },
			mutations:{
    
    }
		};
Vue.use(Vuex);
const store = new Vuex.Store({
    
    
	state: {
    
    
	},
	modules:{
    
    
		A: moduleA,
		B: moduleB,
	}
});
export default store;

注意，定义在$store里面的modules，会把A、B属性导入到$store.state中，即，在使用moduleA里面的元素时，这样写：
{ {\$store.state.A.name}}

vuex项目结构