使用vue2和vuex实现购物车案例以下是一个使用 Vue 2 和 Vuex 实现的购物车案例，包含商品列表、添加商品到

以下是一个使用 Vue 2 和 Vuex 实现的购物车案例，包含商品列表、添加商品到购物车、增加 / 减少商品数量、计算总价等功能。

一、解决思路：

创建 Vue 实例和 Vuex 存储。
在 Vuex 中定义状态、 mutations、actions 和 getters。
在 Vue 组件中使用 Vuex 的状态和方法进行购物车操作。

二、代码示例：

index.html：

收起

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue 2 购物车案例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
</head>
<body>
  <div id="app">
    <h1>商品列表</h1>
    <ul>
      <li v-for="(product, index) in products" :key="index">
        {{ product.name }} - ${{ product.price }}
        <button @click="addToCart(product)">添加到购物车</button>
      </li>
    </ul>
    <h1>购物车</h1>
    <ul>
      <li v-for="(item, index) in cartItems" :key="index">
        {{ item.name }} - ${{ item.price }} x {{ item.quantity }}
        <button @click="incrementQuantity(item)">+</button>
        <button @click="decrementQuantity(item)">-</button>
      </li>
    </ul>
    <p>总价: ${{ totalPrice }}</p>
  </div>

  <script src="./store.js"></script>
  <script src="./main.js"></script>
</body>
</html>

store.js：

收起

javascript

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    products: [
      { id: 1, name: '商品 1', price: 10 },
      { id: 2, name: '商品 2', price: 20 },
      { id: 3, name: '商品 3', price: 30 }
    ],
    cartItems: []
  },
  mutations: {
    ADD_TO_CART(state, product) {
      const existingItem = state.cartItems.find(item => item.id === product.id);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        state.cartItems.push({...product, quantity: 1 });
      }
    },
    INCREMENT_QUANTITY(state, item) {
      item.quantity++;
    },
    DECREMENT_QUANTITY(state, item) {
      if (item.quantity > 1) {
        item.quantity--;
      } else {
        const index = state.cartItems.indexOf(item);
        state.cartItems.splice(index, 1);
      }
    }
  },
  actions: {
    addToCart({ commit }, product) {
      commit('ADD_TO_CART', product);
    },
    incrementQuantity({ commit }, item) {
      commit('INCREMENT_QUANTITY', item);
    },
    decrementQuantity({ commit }, item) {
      commit('DECREMENT_QUANTITY', item);
    }
  },
  getters: {
    totalPrice: state => {
      return state.cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);
    }
  }
});

main.js：

收起

javascript

import Vue from 'vue';
import store from './store';

new Vue({
  el: '#app',
  store,
  computed: {
    products() {
      return this.$store.state.products;
    },
    cartItems() {
      return this.$store.state.cartItems;
    },
    totalPrice() {
      return this.$store.getters.totalPrice;
    }
  },
  methods: {
    addToCart(product) {
      this.$store.dispatch('addToCart', product);
    },
    incrementQuantity(item) {
      this.$store.dispatch('incrementQuantity', item);
    },
    decrementQuantity(item) {
      this.$store.dispatch('decrementQuantity', item);
    }
  }
});

三、代码解释：

index.html：

这是 HTML 页面，引入 Vue 和 Vuex 的 CDN 链接，并挂载 Vue 实例。

store.js：

state：
- products：存储商品列表。
- cartItems：存储购物车中的商品列表。
mutations：
- ADD_TO_CART：添加商品到购物车，如果商品已存在则增加数量，否则添加新商品。
- INCREMENT_QUANTITY：增加购物车商品的数量。
- DECREMENT_QUANTITY：减少购物车商品的数量，若数量为 1 则移除该商品。
actions：
- 分发相应的 mutations，方便在组件中调用。
getters：
- totalPrice：计算购物车商品的总价。

main.js：

创建 Vue 实例并挂载到 #app 元素上。
使用 computed 属性获取 Vuex 中的数据。
使用 methods 调用 Vuex 的 actions 进行购物车操作。

四、使用说明：

将上述代码保存为相应的文件（index.html、store.js、main.js）。
在浏览器中打开 index.html，即可看到商品列表和购物车功能。
点击商品列表中的 “添加到购物车” 按钮，商品将被添加到购物车中。
在购物车中，点击 “+” 按钮可增加商品数量，点击 “-” 按钮可减少商品数量，数量为 1 时点击 “-” 按钮将移除该商品。
总价会根据购物车中的商品及其数量实时更新。

五、注意事项：

此案例使用 Vue 2 和 Vuex 3，确保 CDN 链接的版本与代码兼容。
Vuex 中的 mutations 是同步操作，actions 可用于异步操作，如与后端交互时可在 actions 中进行。