如何计算Vuejs Vuex购物篮总价

// store.js
import { createStore } from 'vuex';

export default createStore({
  state: {
    basket: [
      { id: 1, name: 'Product A', price: 10, quantity: 2 },
      { id: 2, name: 'Product B', price: 20, quantity: 1 }
    ]
  },
  getters: {
    totalPrice(state) {
      return state.basket.reduce((total, item) => total + (item.price * item.quantity), 0);
    }
  },
  mutations: {
    updateQuantity(state, { productId, quantity }) {
      const item = state.basket.find(i => i.id === productId);
      if (item) {
        item.quantity = quantity;
      }
    },
    addToBasket(state, product) {
      const item = state.basket.find(i => i.id === product.id);
      if (item) {
        item.quantity++;
      } else {
        state.basket.push({ ...product, quantity: 1 });
      }
    },
    removeFromBasket(state, productId) {
      state.basket = state.basket.filter(item => item.id !== productId);
    }
  },
  actions: {
    updateQuantity({ commit }, payload) {
      commit('updateQuantity', payload);
    },
    addToBasket({ commit }, product) {
      commit('addToBasket', product);
    },
    removeFromBasket({ commit }, productId) {
      commit('removeFromBasket', productId);
    }
  }
});

<template>
  <div>
    <ul>
      <li v-for="item in basket" :key="item.id">
        {{ item.name }} - ${{ item.price }} x {{ item.quantity }}
        <button @click="updateQuantity(item.id, item.quantity - 1)">-</button>
        <button @click="updateQuantity(item.id, item.quantity + 1)">+</button>
      </li>
    </ul>
    <p>Total Price: ${{ totalPrice }}</p>
  </div>
</template>

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

export default {
  computed: {
    ...mapGetters(['totalPrice']),
    basket() {
      return this.$store.state.basket;
    }
  },
  methods: {
    ...mapActions(['updateQuantity'])
  }
};
</script>