vuex getters配置项
getters和commit,dispatch一样,它也是一个store全新的配置项,它不像actions,mutations,state一样是必须要使用的配置项
如果逻辑复杂并且还想要复用,那么推荐使用getters,一般用于将state中的数据进行加工
下面通过案例引出
编写案例
现在有一个需求,要对sum的值放大十倍
直接实现
虽然可以实现
这种虽然可以实现,但是复用性很差
计算属性使用
当然也可以通过计算属性实现
但是计算属性只适用于当前组件,不能跨组件
getter实现
这种情况最好的办法就是使用getter实现
定义getters
首先在store里面定义getters,在里面进行逻辑处理,它有一个参数是state,里面有存放的数据,通过return返回最终处理好的结果
配置getters
定义好getters之后,就可以在store中配置了
这时候bigSum这个getter配置项就可以使用了
使用getters
直接使用store里面的getters配置项的bigSum函数即可获取到返回值
总结
- 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
- 在
store.js
中追加getters
配置
......
const getters = {
bigSum(state){
return state.sum * 10
}
}
//创建并暴露store
export default new Vuex.Store({
......
getters
})
- 组件中读取数据:
$store.getters.bigSum
1. 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
2. 在store.js中追加getters配置
//js代码
const getters = {
bigSum(state){
return state.sum * 10
}
}
//创建并暴露store
export default new Vuex.Store({
......
getters
})
3. 组件中读取数据:$store.getters.bigSum