vue.js可结算购物车案例代码

Vue.js 可以用来构建一个简单的购物车功能，以下是一个基本的示例代码，展示了如何使用 Vue、Vuex 和 Vue Router 来实现购物车的增删和结算功能。请注意，这只是一个简化版的示例，并未包含所有细节，如错误处理、商品数据管理等，但核心概念是清晰的。

<!-- 主页面（App.vue） -->
<template>
  <div>
    <router-view></router-view>
    <Cart v-if="showCart" :cart-items="cartItems"></Cart>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import Cart from './components/Cart.vue';

export default {
  computed: {
    ...mapState(['cartItems', 'showCart']),
  },
};
</script>

<!-- Cart.vue -->
<template>
  <button @click="addItem">Add to Cart</button>
  <ul>
    <li v-for="(item, index) in cartItems" :key="index">
      {{ item.name }} - {{ item.price }}
      <button @click="removeItem(index)">Remove</button>
    </li>
  </ul>
  <button @click="checkout">Checkout</button>
</template>

<script>
export default {
  methods: {
    addItem() {
      // 假设我们从服务器获取商品信息
      const newItem = { name: 'Item', price: 10 };
      this.$store.dispatch('addCartItem', newItem);
    },
    removeItem(index) {
      this.$store.dispatch('removeCartItem', index);
    },
    checkout() {
      // 这里可能跳转到支付页面或者显示结算信息
      this.showCart = false;
      alert('Checking out...');
    },
  },
};
</script>

<!-- vuex store -->
// store.js
export const state = {
  cartItems: [],
  showCart: true,
};

export const mutations = {
  addCartItem(state, newItem) {
    state.cartItems.push(newItem);
  },
  removeCartItem(state, index) {
    state.cartItems.splice(index, 1);
  },
};

export const actions = {
  async addCartItem({ commit }, newItem) {
    // 在实际应用中，这里可能是异步操作
    commit('addCartItem', newItem);
  },
  async removeCartItem({ commit }, index) {
    // 同上
    commit('removeCartItem', index);
  },
};
</script>

在这个例子中，`App.vue` 负责渲染购物车组件并管理购物车状态，`Cart.vue` 是购物车的界面，展示商品列表并提供添加和删除按钮，`vuex` 存储购物车的状态。当用户点击“添加到购物车”时，通过 Vuex 的 `actions` 发起异步操作（在这里只是简单地添加），真正处理商品数据时通常会涉及 API 调用。