vue3+elementPlus实现购物车

好的，实现购物车需要以下几个步骤：

1. 定义商品数据结构

我们可以定义一个商品对象，包含商品ID、名称、价格、描述等信息，如下所示：

{
  id: 1,
  name: '商品1',
  price: 100,
  desc: '这是商品1的描述信息'
}

2. 创建商品列表

我们可以使用 `v-for` 指令来循环遍历商品列表，并将每个商品渲染到界面上。同时，我们可以添加一个“加入购物车”按钮，用户点击该按钮后将该商品添加到购物车中。

<template>
  <div>
    <div v-for="item in goods" :key="item.id">
      <h3>{{item.name}}</h3>
      <p>{{item.desc}}</p>
      <p>价格：{{item.price}}</p>
      <button @click="addToCart(item)">加入购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [
        {
          id: 1,
          name: '商品1',
          price: 100,
          desc: '这是商品1的描述信息'
        },
        {
          id: 2,
          name: '商品2',
          price: 200,
          desc: '这是商品2的描述信息'
        },
        {
          id: 3,
          name: '商品3',
          price: 300,
          desc: '这是商品3的描述信息'
        }
      ]
    }
  },
  methods: {
    addToCart(item) {
      // TODO: 将商品加入购物车
    }
  }
}
</script>

3. 创建购物车组件

我们可以创建一个购物车组件，用于显示购物车中的商品列表。同时，我们可以添加一个“去结算”按钮，用户点击该按钮后跳转到结算页面。

<template>
  <div>
    <div v-for="item in cartList" :key="item.id">
      <h3>{{item.name}}</h3>
      <p>价格：{{item.price}}</p>
      <p>数量：{{item.num}}</p>
    </div>
    <button @click="goCheckout">去结算</button>
  </div>
</template>

<script>
export default {
  computed: {
    cartList() {
      // TODO: 获取购物车中的商品列表
      return []
    }
  },
  methods: {
    goCheckout() {
      // TODO: 跳转到结算页面
    }
  }
}
</script>

4. 实现购物车逻辑

我们可以使用 Vuex 管理购物车状态，将购物车中的商品列表存储在 Vuex 中。同时，我们可以添加一个“添加到购物车”操作，将用户选中的商品添加到购物车中。

<template>
  <div>
    <div v-for="item in goods" :key="item.id">
      <h3>{{item.name}}</h3>
      <p>{{item.desc}}</p>
      <p>价格：{{item.price}}</p>
      <button @click="addToCart(item)">加入购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [
        {
          id: 1,
          name: '商品1',
          price: 100,
          desc: '这是商品1的描述信息'
        },
        {
          id: 2,
          name: '商品2',
          price: 200,
          desc: '这是商品2的描述信息'
        },
        {
          id: 3,
          name: '商品3',
          price: 300,
          desc: '这是商品3的描述信息'
        }
      ]
    }
  },
  methods: {
    addToCart(item) {
      this.$store.commit('addToCart', item)
    }
  }
}
</script>

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    cartList: [] // 购物车商品列表
  },
  mutations: {
    addToCart(state, item) {
      const index = state.cartList.findIndex(i => i.id === item.id)
      if (index === -1) {
        // 如果购物车中不存在该商品，则添加到购物车中
        state.cartList.push({
          ...item,
          num: 1 // 商品数量初始化为1
        })
      } else {
        // 如果购物车中存在该商品，则将数量加1
        state.cartList[index].num++
      }
    }
  }
})

现在，我们已经可以将商品添加到购物车中了。接下来，我们需要在购物车组件中显示购物车中的商品列表，并实现“去结算”操作。

<template>
  <div>
    <div v-for="item in cartList" :key="item.id">
      <h3>{{item.name}}</h3>
      <p>价格：{{item.price}}</p>
      <p>数量：{{item.num}}</p>
    </div>
    <button @click="goCheckout">去结算</button>
  </div>
</template>

<script>
export default {
  computed: {
    cartList() {
      return this.$store.state.cartList
    }
  },
  methods: {
    goCheckout() {
      // TODO: 跳转到结算页面
    }
  }
}
</script>

至此，我们已经完成了购物车的实现。完整代码如下：

<!-- 商品列表组件 -->
<template>
  <div>
    <div v-for="item in goods" :key="item.id">
      <h3>{{item.name}}</h3>
      <p>{{item.desc}}</p>
      <p>价格：{{item.price}}</p>
      <button @click="addToCart(item)">加入购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      goods: [
        {
          id: 1,
          name: '商品1',
          price: 100,
          desc: '这是商品1的描述信息'
        },
        {
          id: 2,
          name: '商品2',
          price: 200,
          desc: '这是商品2的描述信息'
        },
        {
          id: 3,
          name: '商品3',
          price: 300,
          desc: '这是商品3的描述信息'
        }
      ]
    }
  },
  methods: {
    addToCart(item) {
      this.$store.commit('addToCart', item)
    }
  }
}
</script>

<!-- 购物车组件 -->
<template>
  <div>
    <div v-for="item in cartList" :key="item.id">
      <h3>{{item.name}}</h3>
      <p>价格：{{item.price}}</p>
      <p>数量：{{item.num}}</p>
    </div>
    <button @click="goCheckout">去结算</button>
  </div>
</template>

<script>
export default {
  computed: {
    cartList() {
      return this.$store.state.cartList
    }
  },
  methods: {
    goCheckout() {
      // TODO: 跳转到结算页面
    }
  }
}
</script>

<!-- Vuex Store -->
<script>
import { createStore } from 'vuex'

export default createStore({
  state: {
    cartList: [] // 购物车商品列表
  },
  mutations: {
    addToCart(state, item) {
      const index = state.cartList.findIndex(i => i.id === item.id)
      if (index === -1) {
        // 如果购物车中不存在该商品，则添加到购物车中
        state.cartList.push({
          ...item,
          num: 1 // 商品数量初始化为1
        })
      } else {
        // 如果购物车中存在该商品，则将数量加1
        state.cartList[index].num++
      }
    }
  }
})
</script>