vuex购物车案例代码

Vuex 是一个专为 Vue.js 应用程序设计的状态管理模式，它提供了一种集中存储和管理应用状态的方式，特别适合处理像购物车这样的共享组件状态。下面是一个简单的 Vue.js 和 Vuex 购物车案例代码概览：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cart: [], // 存放商品列表
    totalPrice: 0, // 总价格
  },
  mutations: {
    addItem(item) {
      this.cart.push(item)
      this.totalPrice += item.price
    },
    removeItem(index) {
      this.cart.splice(index, 1)
      this.totalPrice -= this.cart[index].price
    },
    updateItem(index, updatedItem) {
      // 更新指定商品信息
      this.cart[index] = updatedItem
      // 如果价格变化，更新总价
      if (updatedItem.price !== this.cart[index].price) {
        this.totalPrice = this.cart.reduce((sum, product) => sum + product.price, 0)
      }
    },
    clearCart() {
      this.cart.length = 0
      this.totalPrice = 0
    },
  },
  actions: {
    addToCart({ commit }, item) {
      commit('addItem', item)
    },
    removeFromCart({ commit }, index) {
      commit('removeItem', index)
    },
    // 更多动作（如更新商品或清空购物车）
  },
  getters: {
    getCartItems(state) {
      return state.cart
    },
    getTotalPrice(state) {
      return state.totalPrice
    },
  },
})

在这个例子中，`store/index.js` 文件定义了购物车的状态、更改这些状态的方法（mutations）、与状态交互的动作（actions）以及用于读取状态的 getter。

在组件中，你可以这样使用这个状态：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in cart" :key="index">
        {{ item.name }} - {{ item.price }}
        <button @click="removeFromCart(index)">Remove</button>
      </li>
    </ul>
    <p>Total price: {{ totalPrice }}</p>
    <button @click="addToCart({ name: 'New Item', price: 10 })">Add to Cart</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['getCartItems', 'getTotalPrice']), // 从 store 中获取数据
  },
  methods: {
    ...mapActions(['addToCart', 'removeFromCart']), // 调用 action
  },
}
</script>

以上代码展示了一个基础的购物车功能，实际项目中可能还需要添加错误处理、分页、商品详情等复杂功能。相关问题：

1. 在Vue中，为什么要使用Vuex来管理购物车？
2. getters在Vuex中的作用是什么？
3. 这段代码如何处理购物车中的商品数量变化和价格更新？