vue写购物车用什么结构好

在Vue中，你可以使用一个数组来保存购物车中的商品信息，每个商品可以用一个对象来表示，包含商品名称、价格、数量等属性。例如：

data() {
  return {
    cartItems: [
      { name: '商品1', price: 10, quantity: 2 },
      { name: '商品2', price: 20, quantity: 1 },
      { name: '商品3', price: 30, quantity: 3 }
    ]
  }
}

然后在页面中，你可以使用`v-for`指令来遍历购物车中的商品，并展示商品名称、价格、数量、小计等信息。同时，你还需要计算购物车的总价，可以使用计算属性来实现：

computed: {
  total() {
    let sum = 0
    for (let item of this.cartItems) {
      sum += item.price * item.quantity
    }
    return sum
  }
}

当用户点击“加入购物车”按钮时，你可以通过调用一个方法来实现添加商品到购物车的功能。例如：

methods: {
  addToCart(item) {
    let found = false
    for (let cartItem of this.cartItems) {
      if (cartItem.name === item.name) {
        cartItem.quantity++
        found = true
        break
      }
    }
    if (!found) {
      this.cartItems.push({ ...item, quantity: 1 })
    }
  }
}

其中，`item`表示要加入购物车的商品对象，如果购物车中已经有该商品，则数量加1，否则将该商品对象添加到数组中。

当用户点击“结算”按钮时，你可以通过调用一个方法来实现结算的功能，例如：

methods: {
  checkout() {
    // 发送请求到后台进行结算
    // 清空购物车数组
    this.cartItems = []
  }
}

以上是一个简单的购物车结构，可以根据需求进行适当调整。