vuex实现购物车功能

Vuex 是一个专为 Vue.js 应用程序设计的状态管理模式，它提供了一种集中存储和管理应用组件之间共享状态的方式。在实现购物车功能时，Vuex 可以帮助我们在单页应用中保持购物车的状态（如商品列表、数量、总价等），并且使得这些状态在整个应用中都是响应式的。

下面是使用 Vuex 实现购物车功能的基本步骤：

1. 定义状态 (state)：
在 `store` 中创建一个购物车的状态对象，包含商品列表 (`cartItems`)、总数量 (`cartCount`) 和总价 (`cartTotal`)。

state: {
  cartItems: [],
  cartCount: 0,
  cartTotal: 0
},

2. 定义 mutations (改变状态的方法)：
用来更新购物车状态的函数。例如，添加商品 (`ADD_TO_CART`)、从购物车移除商品 (`REMOVE_ITEM`)、更新数量 (`UPDATE_ITEM_QUANTITY`)。

mutations: {
  ADD_TO_CART(state, item) {
    state.cartItems.push(item);
    state.cartCount++;
    state.cartTotal += item.price;
  },
  REMOVE_ITEM(state, index) {
    state.cartItems.splice(index, 1);
    state.cartCount--;
    state.cartTotal -= state.cartItems[index].price;
  },
  UPDATE_ITEM_QUANTITY(state, { index, quantity }) {
    state.cartItems[index].quantity = quantity;
    state.cartTotal = calculateCartTotal(state.cartItems);
  }
},

3. 计算总价 (getters)：
为了高效地获取购物车总价，我们可以创建一个getter函数 (`calculateCartTotal`)，根据商品列表计算总价。

getters: {
  calculateCartTotal(state) {
    return state.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
  }
},

4. 使用 actions (异步操作)：
当需要从后端获取商品信息或者处理复杂的业务逻辑时，可以定义 actions。例如，`FETCH_CART_ITEMS` 和 `UPDATE_CART_ITEM`。

5. 配置 actions：
在 actions 中调用 API 或者执行其他异步操作，然后触发对应的 mutations 更新状态。

6. 创建 getters 和 actions 之后，你可以在 Vue 组件中通过 `mapState` 和 `mapActions` 来读取状态和触发操作。

<template>
  <div>
    <!-- 商品列表 -->
    <ul>
      <li v-for="(item, index) in cartItems" :key="index">
        {{ item.name }} - {{ item.quantity }} x {{ item.price }}
        <button @click="removeItem(index)">Remove</button>
      </li>
    </ul>
    <p>Total: {{ cartTotal }}</p>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['cartItems', 'cartTotal'])
  },
  methods: {
    ...mapActions(['REMOVE_ITEM', 'UPDATE_ITEM_QUANTITY'])
  }
};
</script>