Vuex的基本使用

1.安装 vuex依赖包

npm install vuex --save

2.导入vuex 包

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(vuex);

3.创建store对象

const store = new Vuex.Store({
	//state存放的就是全局共享的数据
	state:{count:0}
})

4.将store对象挂载到vue实例中

new Vue({
	el:'#app',
	render:h=>h(app),
	router,
	//将创建的共享数据对象挂载到vue实例中，
	//所有的组件就可以在store 中获取全局的数据
	store
	
})

Vuex的主要核心概念：

2.1State
State提供唯一的公共数据源，所有共享的数据都要统一放到Store 的State中进行存储。

//创建Store数据源，提供唯一的公共数据
const store = new Vuex.Store(
{
	state:{count:0}
})

访问state数据的第一种方法：

this.$store.state.count

如下：

<template>
<div>
<h3>当前最新的count值为：{{this.$store.state.count}}</h3>
</div>
</template>
<script>
export default {
	data(){
		return{}
	}
}
</script>

组件访问State中数据的第二种的方式：

//从vuex中按需导入mapState函数
import {mapState} from 'vuex'

通过刚才导入的mapState函数，将当前组件需要的全局数据。映射为当前组件的computed计算属性；

//将全局数据，映射为当前的计算属性
computed:{
	...mapState(['count'])//需要哪个全局的数据(count),就放在里面声明
	}

<template>
<div>
<h3>当前最新的count值为：{{count}}</h3>
</div>
</template>
<script>
export default {
	data(){
		return{}
	},
	computed:{
		...mapState(['count'])
}
</script>

2.2Mutation
Mutation用于变更Store中的数据。
a.只能通过mutation变更store中的数据，不可以直接操作Store中的数据
b.通过这种方式索然繁琐，但是可以集中监控所有数据的变化。

const store = new Vuex.Store({
	state:{count:0},
	//定义mutation
	mutation:{
		//接受state对象，获取state对象里面的数据
		add(state){
			//变更状态
			state.count++;
		}
	}

那么如何调用mutation中的add方法中呢，可以在methods中写个点击方法通过commit调用mutation的add方法。

<template>
<div>
<h3>当前最新的count值为：{{count}}</h3>
<button @click='handlel'>加1</button>
</div>
</template>
<script>
export default {
	data(){
		return{}
	},
	computed:{
		...mapState(['count'])
		}，
	methods:{
		handlel(){
			//触发mutation中的add方法
			this.$store.commit('add');
	}
}
}
</script>

c.可以在触发mutations时传递参数

//定义mutation
const store = new Vuex.Store({
	state:{count:0},
	mutations:{
		addn(state,step){
			//变更状态
			state.count+=step
			}
		}
	})

//触发mutation
methods:{
	handle2(){
		//在调用commit函数。commit函数的作用是调用某个mutations的方法
		//触发mutations时传递参数
		this.$store.commit('addn',3)
		}
	}

this.$store.commit()是触发mutations的第一种方式，触发mutations的第二种方式。

//1.在当前组件从Vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex'

通过刚才导入的mapMutations函数，映射为当前组件的methods函数

methods:{
	...mapMutations(['add','addn''])，
	handlel(){
		this.add();//触发mutations,调用mutations的add方法
		},
	handle2(){
		this.addn(3);//触发mutations,调用mutations的addn方法，3是传递给mutations中addn的参数。
	}
}

2.3Action
Action用于处理异步任务
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据。

//定义Action
const store = new Vuex.Store({
	state:{count:0},
	mutations:{
		add(state){
			state.count+=1}
			},
	actions:{
		//context是store的实例，固定的写法
		addAsync(context){
			setTimeout(()=>{
				//在actions中，不能直接修改state中的数据
				//只能通过context.commit()触发某个mutations中的方法才行。
				context.commit('add')
				},1000)//1秒之后触发mutations中的add方法
			}
		}
	})

//触发action
methods:{
	handle(){
		//在当前组件触发actions
		//触发actions的第一种方式
		this.$store.dispatch('addAsync')
		}
	}

解决actions异步任务时携带参数：

//定义Action
const store = new Vuex.Store({
	state:{count:0},
	mutations:{
		//接收actions传递过来的参数
		add(state,step){
			state.count+=step
			}
		},
	actions:{
		//context是store的实例，固定的写法
		addAsync(context，step){//step是methods中的方法传递过来的参数
			setTimeout(()=>{
				//在actions中，不能直接修改state中的数据
				//只能通过context.commit()触发某个mutations中的方法才行。
				context.commit('add'，step)//将接受到的参数step传给mutations
				},1000)//1秒之后触发mutations中的add方法
			}
		}
	})

//触发action
methods:{
	handle(){
		//在当前组件触发actions，调用dispatch函数
		//触发actions时携带参数5
		this.$store.dispatch('addAsync',5)
		}
	}

触发actions的第二种方法：

//在当前组件从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'

methods:{
	...mapActions(['add','addn''])，
	handlel(){
		this.add();//触发actions,调用actions的add方法
		},
	handle2(){
		this.addn(3);//触发actions,调用actions的addn方法，3是传递给actions中addn的参数。
	}
}

2.4getter
getter不能修改state里面的数据，只是对state里面的数据进行包装

//定义getter
const store = new Vuex.Store({
	state:{
		count:0
		},
	getters:{
		//接收state参数
		showNum: state=>{
			return '当前的数量时【'+state.count+']'//获取state里面的数据
			}
		}
	})

使用getter的第一种方式：

this.$store.getters.名称

使用getters的第二种方式：

import {mapGetters} from 'vuex'
computed:{
	...mapGetters(['showNum'])
	}