vue常用之状态管理的vuex“getters“

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

2. 在store.js中追加getters配置

   ......
   
   const getters = {
   	bigSum(state){
   		return state.sum * 10
   	}
   }
   
   //创建并暴露store
   export default new Vuex.Store({
   	......
   	getters
   })

3. 组件中读取数据：$store.getters.bigSum

案列展示：

1.在store中

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {

}
//准备mutations——用于操作数据（state）
const mutations = {

}





//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}


//准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}



//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})

2.组件中

<template>
	<div>

		<h3>当前求和放大10倍为：{{$store.getters.bigSum}}</h3>
		
	</div>
</template>