Vuex的四大金刚

Vuex的四大金刚

1.State(单一状态树)

state中放的是键值对
在store下的index.js代码如下

export default new Vuex.Store({
	state: {
		number: 1，
		number2:2,
		number3:3
	},
	mutations: {},
	actions: {},
	modules: {}
})

2.Mutation

修改state中的属性值

export default new Vuex.Store({
	state: {
		number: 1，
		number2:2,
		number3:3
	},
	mutations: {
		//其中有两个参数，参数一为state对象，参数二为调用下面方法传过来的值
		numberAdd(state){
			state.number++;
		},
		number2Add(state,number){
			state.number2=number
		}
	},
	actions: {},
	modules: {}
})

在组件中调用的方法

<template>
	<div class="homeWrap">
		这里是首页{{$store.state.number}}
		这里是首页{{$store.state.number2}}
		<button @click="numberChange">点击</button>
		<button @click="number2Change">点击</button>
	</div>
</template>

<script>
	export default{
		methods:{
			numberChange(){
				this.$store.commit('numberAdd');
			},
			number2Change(){
				this.$store.commit('number2Add',3);
			}
		}
	}
</script>

通过this.$store.commit()方法调用Vuex中的Mutation中的方法来改变State中的值

3.Action

当异步操作的时候在Action中进行，因为Mutation中不支持异步方法
store中的代码

export default new Vuex.Store({
	state: {
		number: 1，
	},
	mutations: {
		numberAdd(state){
			state.number++;
		}
	},
	actions: {
		//异步操作
		//context上下文 在这里指mutations
		anumberAdd(context){
			setTimeout(()=>{
				//这里定时调用的是mutations中的numberAdd方法
				context.commit('numberAdd')
			},1000)
		}

	},
	getters:{},
	modules: {}
})

组件中的使用

<template>
	<div class="homeWrap">
		<p>{{$store.state.number}}</p>
		<button @click="numberChange">点击</button>
	</div>
</template>

<script>
	export default{
		methods:{
			numberChange(){
				//在组件中使用调用的是dispath方法
				this.$store.dispath('anumberAdd');
			}
		}
	}
</script>

4.Getter

类似于组件中的计算属性，当我使用Vuex中state中的属性值的时候需要进行计算，可以使用Getter，Getters中的方法接受两个参数 参数一 state 参数二 getters
例如：当你想使用State中的number2，并且需要获得number2的平方的时候

export default new Vuex.Store({
	state: {
		number: 1，
		number2:2,
		number3:3
	},
	mutations: {
		//其中有两个参数，参数一为state对象，参数二为调用下面方法传过来的值
		numberAdd(state){
			state.number++;
		},
		number2Add(state,number){
			state.number2=number
		}
	},
	actions: {},
	getters:{
		powerCounter(state){
			return state.number2 * state.number2
		},
		//当使用getters中的方法的时候想传入参数,return一个函数,并且调用,
		powerCounter2(state,getters){
			return (number)=>{
				state.number2*number;
				console.log(getters);//这个getters是store中的Getters
			}
		}
	},
	modules: {}
})

组件中的使用

<template>
	<div class="homeWrap">
		<!-- 你可以在这里使用这种方法进行计算-->
		<h2>{{$store.state.number2 * $store.state.number2 }}</h2>
		<!-- 同时你也可以使用getters中的方法 -->
		<h2>{{$store.getters.powerCounter}}</h2>
		<!-- 调用Getters中的方法传入参数 -->
		<h2>{{$store.getters.powerCounter(2)}}</h2>
		<button @click="numberChange">点击</button>
	</div>
</template>

<script>
	export default{
		methods:{
			numberChange(){
				this.$store.commit('changeNumber')
			}
		}
	}
</script>