vuex中store对象的模块化管理

vuex在vue项目中主要用于全局的变量存储，包含着应用中的大部分状态，当把所用的状态集中到同一个store对象中时，store对象会变得非常臃肿，这时，项目往往会将store对象分割成一个个模块，每个模块拥有自己的state、mutation、getter、action，之后对其进行集成。

一、代码样例

在src目录下建立文件夹store，文件夹中建立子文件夹modules，用于存放不同模块；同时创建文件getters.js，此文件的用处后面会讲到；创建文件index.js作为最后的集成文件。

1、modules

本文以user.js为例，创建一个关于获取用户信息的状态。

// user.js文件
const user = {
	state: {
		userInfo: {},
		isLogin: '',
		count: '',		// 只是用于演示getter作用而已
	},
	mutations: {
		SET_USER_INFO: (state, userInfo) => {
			state.userInfo = userInfo;
			state.isLogin = true;
			sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
		},
		CLEAR_USER: (state) => {
			state.userInfo = {};
			state.isLogin = false;
			sessionStorage.removeItem('userInfo');
		}
	}
}
export default user;

2、getters

const getters = {
	count: state => state.user.count++;
}
export default getters;

到了这里你或许可以看出来getters的作用，就是在我们获取某个全局状态值之前，对该值进行处理，类似于组件中的computed。
在getters中定义的属性，如果想要拿到它的值，就需要在组件中使用mapGetters，而非mapState。

3、index.js集成

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
import getters from './getters';

const store = new Vuex.Store({
	modules: {
		user
	},
	getters
});
export default store;

最后，不要忘了在main.js中使用

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

到了此步，项目中的store我们就定义好了，那么如何在组件中进行使用呢

二、使用store中的变量

• 未经过getters处理的变量，直接通过mapState获取

import { mapState } from 'vuex';
// ...
computed: {
	...mapState(['user']),
}
// ...
// 使用：
console.log(this.user.userInfo);

• 经过getters处理的变量，通过mapGetters获取

import { mapGetters } from "vuex";
// ...
computed: {
    ...mapGetters(['count']),
},
// 使用
console.log(this.count);

三、使用mutations中的方法

const userInfo = {
	userName: 'admin',
};
this.$store.commit('SET_USER_INFO', userInfo);

大概就是这么多了，对于actions以后再来补充。