getters配置项

getters配置项并不是必须要使用的，当state中的数据需要经过加工后再使用时，可以使用getters加工。

使用方法

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
......
// 准备getters——用于加工state中的数据
const getters = {
    // state：真正的state
	calculate(state){
        // 靠返回值决定自己的值
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	......
    // 在store中配置getters
	getters
})

2.模板中读取数据

1
2
3
<!-- <h1>当前求和放大10倍为:{{ this.$store.state.sum *10 }}</h1> -->
<h1>当前求和放大10倍为:{{ this.$store.getters.calculate }}</h1>

PS:

1.Vuex中state和getters的关系就类似于Vue中data和computed的关系，state和data是数据源头，getters和computed是拿着数据源头的数据进行的加工。

2.计算属性是当前组件复用复杂运算，getters是跨组件复用复杂运算