vuex-getters配置项

175 阅读1分钟

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函数即可获取到返回值

总结

  1. 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。
  2. store.js中追加getters配置
......

const getters = {
        bigSum(state){
                return state.sum * 10
        }
}

//创建并暴露store
export default new Vuex.Store({
        ......
        getters
})
  1. 组件中读取数据:$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