Vue基础教程（194）Vuex中的getter对象：别卷了！Vuex的Getter根本不是备胎，是你家的宝藏男孩！

哎，哥们儿，姐们儿，有没有遇到过这种场景？你在用Vuex管理状态，那个state里面堆满了各种原始数据，就像你家刚逛完超市回来的冰箱，塞得满满登登。

这时候，你在一个组件里，需要显示“购物车里所有商品的总价”。你挠挠头，心想：“这还不简单？” 于是你在组件的computed里写下：

computed: {
  totalPrice() {
    return this.$store.state.cartList.reduce((total, item) => {
      return total + item.price * item.quantity;
    }, 0);
  }
}

搞定！完美！

然后，你在另一个组件里，需要显示“购物车里所有商品的数量”。你又挠挠头，复制粘贴，稍微改了一下：

computed: {
  totalQuantity() {
    return this.$store.state.cartList.reduce((total, item) => {
      return total + item.quantity;
    }, 0);
  }
}

没过多久，产品经理说，要在第三个地方显示“打了九折后的总价”……你已经开始第三遍reduce了。

停！STOP！

你有没有闻到一股浓浓的“代码坏味道”？重复！重复！还是TMD重复！

这时候，就该请出我们今天的主角，Vuex里的“宝藏男孩”—— Getter。它可不是什么可有可无的备胎，而是你State的“御用代言人”和“智能计算器”。

一、 Getter到底是啥？官方吐槽，最为致命

你可以把Getter理解为Vuex里的 “计算属性”。

没错，就是那个你熟悉的computed。但它是Store级别的，全局的，共享的。它的使命只有一个：从State中派生出一些状态。

官方吐槽来了： 为啥要用它？因为如果一个状态需要在多个组件中使用，我们就要复制粘贴这个函数，或者抽取到一个共享函数然后再多处导入它——无论哪种方式都很麻烦，而且不好维护。

Getter就是为了解决这个“麻烦”而生的。它把那些需要根据State计算得出的值，统一管理在Store里。组件嘛，就直接“坐享其成”，用就完了！

二、 Getter的七十二变（其实就几种用法）