58 vuex getters配置项

getters和commit,dispatch一样，它也是一个store全新的配置项，它不像actions，mutations，state一样是必须要使用的配置项

如果逻辑复杂并且还想要复用，那么推荐使用getters，一般用于将state中的数据进行加工

下面通过案例引出

58.1 编写案例

现在有一个需求，要对sum的值放大十倍

直接实现

虽然可以实现

这种虽然可以实现，但是复用性很差

计算属性使用

当然也可以通过计算属性实现

但是计算属性只适用于当前组件，不能跨组件

getter实现

这种情况最好的办法就是使用getter实现

定义getters

首先在store里面定义getters，在里面进行逻辑处理，它有一个参数是state，里面有存放的数据，通过return返回最终处理好的结果

配置getters

定义好getters之后，就可以在store中配置了

这时候bigSum这个getter配置项就可以使用了

使用getters

直接使用store里面的getters配置项的bigSum函数即可获取到返回值

58.2 总结

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