vuex几大模块和Vuex助手使用详解

Vuex 是一个专为 Vue.js 应用程序开发的状态管理库，用于保存用用程序的状态，即信息或数据，使得Vuex使应用程序的所有组件可以共享数据。每一个 Vuex 应用的核心就是 store（仓库），包含着你的应用中大部分的状态 ( state )，改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

1、Vuex主要有以下几个模块

1. state：定义了应用程序的数据，可以设置默认的初始状态。
2. getters：允许组件从 store 中获取数据 。
3. mutations：是唯一更改 store 中状态的方法，且必须是同步函数。但不可以直接调用mutation，必须使用commit函数来告诉Vuex更新存储并提交更改。
4. actions：执行异步操作来存取状态，但也不可以直接调用action，必须使用dispatch函数来执行。
   代码演示：

<script>
	const store = new Vuex.Store({
		//定义状态，并赋予初始值
		state:{
			msg:'Vuex的使用',
			count:0
		},
		//使用getter来返回状态
		getters:{
			msg(state){
				return state.msg;
			},
			count(state){
				return state.count;
			}	
		},
		//可以理解为其他语言中的setter，改变状态的值，此处为把传进来的参数step累加到count中
		mutations:{
			increment(state,step){
				state.count += step;
			}	
		},
		//模拟服务器延迟1秒
		//通过commit调用来触发mutations对象中的increment方法，并把参数step传递给increment
		actions:{
			increment(context,step){
				setTimeout(function(){
					context.commit('increment',step);
				},1000);
			}	
		},
	});
	//创建Vue实例
	let vm = new Vue({
		el:'#app',
		
		computed:{
			//可以直接通过计算属性直接获取store.state中的状态
			msg(){
				return store.state.msg;
			}
			//通过计算属性来返回getters中的count
			counter(){
				return store.getters.count;
			}
		},
		methods:{
			increment(){
				//调用dispatch方法来派发actions中的increment方法，并把参数2传递给increment
				store.dispatch('increment',2);
			}
		}
	});
</script>

2、Vuex助手

Vuex为我们提供了一些辅助工具，如mapStates，mapGetters，mapMutations，mapActions，从而来减少繁杂的工作量。
对于使用mapStates,mapGetters，可以把所有的state，getter添加到计算属性中，而不用向上面代码那样逐个添加。
在使用这些助手时，必须引入。拿mapGetters举例，其他类似。

import {mapGetters} from 'vuex';

代码演示：

computed:{
	...mapState{[
		'state1',
		'state2',
	]},
	...mapGetters{[
		'count1',
		'count2',
	]}
}

对于mapMutations,mapActions，可以在methods属性中使用，把多个mutation和action映射到应用程序。
代码演示：

methods:{
	...mapMutations([
		//mut1将this.mut1()映射到this.$store.commit('mut1'),mut2类似
		//这样就不同创建每个方法，派发每个action
		'mut1',
		'mut2'
	])
}

代码演示：

methods:{
	...mapActions([
		//act1将this.act1()映射到this.$store.dispatch('act1'),act2类似
		'act1',
		'act2'
	])
}

3、Vuex模块

当应用程序很大时，需要划分模块，Vuex.Store实例中将增加mudules对象。
把state，getter，mutation，action对象创建在一个单独的xxx.js文件中，xxx.js在modules目录下。
代码演示：

const state = {
	state1:{}
};
const getters = {
	get1:state => state.state1
};
const actions = {
	initState:{}
};
const mutations = {
	setState:{}
};

//导出以上四个对象
export default{
	state,
	getters,
	mutations,
	actions
}

使用模块，在yyy.js文件中引入模块，yyy.js在store目录下。
代码演示：

import Vue from 'vue';
impoet Vuex from 'vuex';
import xxx from './modules/xxx';

Vue.use(Vuex);

export const store = new Vuex.Store({
	modules:{
		//对应上面引入的xxx
		xxx
	}
});

另外，由于Vuex中所有内容共享相同的全局名称空间，当在两个不同文件中分别命名相同的state或getter或mutation或action，就会发生冲突，报错duplicate getter key。
可以在Vuex.store文件顶部设置namespaced:true，用于分解每个名称空间的模块。