如何在Vue.js+Vuex中计算购物篮总价并实现实时更新？

Hey there! Since you're new to Vue and Vuex, let me walk you through the simplest and most idiomatic way to solve this—using Vuex Getters! They’re built exactly for deriving state like your shopping cart total, and they’ll automatically update whenever the underlying data changes.

1. 在Vuex Store中添加Getter #

Getter就像是Vuex状态的计算属性——它会缓存计算结果，只有当它依赖的状态发生变化时才会重新计算。下面是如何为总价添加Getter的代码：

// 你的store.js文件
const store = new Vuex.Store({
  state: {
    basketContents: [
      { name: "商品A", quantity: 2, price: 1000 },
      { name: "商品B", quantity: 6, price: 120 }
      // ...其他商品
    ]
  },
  getters: {
    totalPrice: (state) => {
      // 遍历每个商品，计算单品总价后累加
      return state.basketContents.reduce((total, item) => {
        return total + (item.quantity * item.price);
      }, 0); // 初始总价为0
    }
  },
  // 别忘了添加修改购物篮内容的mutations（必须通过mutations修改Vuex状态）
  mutations: {
    // 示例：修改商品数量的mutation
    updateItemQuantity(state, payload) {
      const targetItem = state.basketContents.find(item => item.name === payload.name);
      if (targetItem) {
        targetItem.quantity = payload.quantity;
      }
    }
  }
});

2. 在组件中使用这个Getter #

有两种简单的方式在组件中获取这个计算出的总价：

方式1：直接通过$store访问

在组件模板里可以直接引用：

<template>
  <div class="cart">
    <h3>购物篮总价：{{ $store.getters.totalPrice }}</h3>
  </div>
</template>

方式2：使用mapGetters简化代码

如果你希望模板更简洁，可以用mapGetters辅助函数将Getter映射为组件的计算属性：

<template>
  <div class="cart">
    <h3>购物篮总价：{{ totalPrice }}</h3>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    // 将Getter展开为组件的计算属性
    ...mapGetters(['totalPrice'])
  }
};
</script>

3. 自动同步更新的特性 #

最棒的一点是：只要你通过Vuex mutation（或者异步场景下的action）修改了basketContents里商品的数量或价格，totalPrice getter会自动重新计算，并且组件里的总价会同步更新——Vuex的响应式系统会帮你处理所有细节，完全不需要手动触发更新！

小提醒：永远通过mutation（或action）修改Vuex状态，不要直接修改state.basketContents，这样能让状态变更更可预测、更易追踪。

内容的提问来源于stack exchange，提问作者Saaransh Menon