Vuex Mutation变更Store中的数据

Vuex Mutation变更Store中的数据

以下办法是错误的

<template>
	<div>
		<p>{{$store.state.count}}</p>
		<button @click="btnHandler">+1</button>
	</div>
</template>
<script>

export default{
	data(){
		return{}
	},
	methods:{
		btnHandler(){
			this.$store.state.count++
		}
	}
}
</script>

只能通过mutation变更Store数据，不可以直接操作Store中的数据

正确的做法：

第一种做法：

在store.js中

const store = new Vuex.Store({
	state:{
	count: 0
	},
	mutations:{
		add(state){
			state.count++
		}
	},
})

在路由组件中

<template>
	<div>
		<p>{{$store.state.count}}</p>
		<button @click="btnHandler">+1</button>
	</div>
</template>
<script>
export default{
	data(){
		return{}
	},
	methods:{
		btnHandler(){
			// commit 的作用是调用某个mutation函数
			this.$store.commit('add')
		}
	}
}
</script>

第二种做法：

在store.js中

const store = new Vuex.Store({
	state:{
	count: 0
	},
	mutations:{
		add(state){
			state.count++
		}
	},
})

在路由组件中

<template>
	<div>
		<p>{{$store.state.count}}</p>
		<button @click="btnHandler">+1</button>
	</div>
</template>
<script>
//从vuex中导入mapMutations函数
import { mapMutations } from 'vuex'
 
export default{
	data(){
		return{}
	},
	methods:{
		//将指定的mutations函数，映射为当前组建的methods函数
		...mapMutation(['add']),
		btnHandler(){
			this.add()
		}
	}
}
</script>