Vuex Getter

Vuex Getter

①Getter不会修改Store中的数据，可以对Store中已有的数据加工处理形成新的数据，类似Vue的计算属性

②Store中的数据发生变化，Getter的数据也会跟着变化

在store.js中

//定义Getter
const store = new Vuex.Store({
	state:{
		count:0
	},
	getters:{
	showNum:state =>{
			return '当前最新的数量是【'+ state.count +'】'
		}
	} 
})

使用getters的第一种方式：

this.$store.getters.名称

<template>
	<div>
		<p>{{$store.getters.showNum}}</p>
	</div>
</template>
<script>
export default{
	data(){
		return{}
	},
}
</script>

使用getters的第二种方式：

<template>
	<div>
		<p>{{showNum}}</p>
	</div>
</template>
<script>
export default{
import { mapGetters } from 'vuex'
	data(){
		return{}
	},
	computed:{
		...mapGetters(['showNum'])
	}
}
</script>