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
})

3. 组件中读取数据：$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