Vue3+Typescript+Vite构建购物车的前世今生

前端

2024-01-22 01:31:53

在前端开发领域，Vue3+Typescript+Vite组合已成为主流技术栈。本文将带领大家从头开始，构建一个购物车项目，不仅可以帮助你了解这三个技术的实际应用，还能加深对购物车业务逻辑的理解。

项目背景

购物车项目是一个常见的业务场景，涉及到商品展示、添加商品、删除商品、修改数量、计算总价等功能。在本文中，我们将使用Vue3+Typescript+Vite技术栈，从头开始构建一个购物车项目。

技术选型

Vue3： Vue3是目前最流行的前端框架之一，它具有组件化、响应式数据、模板语法等特点，可以帮助我们快速开发高质量的应用程序。
Typescript： Typescript是JavaScript的超集，它增加了类型系统，可以帮助我们编写出更加健壮、可维护的代码。
Vite： Vite是一个构建工具，它可以帮助我们快速地打包和构建我们的应用程序。

项目搭建

首先，我们创建一个新的Vue3项目：

vue create vue3-ts-vite-cart

然后，我们安装必要的依赖：

npm install

代码实现

1. 商品列表

首先，我们创建一个商品列表组件。在components/ProductList.vue文件中，代码如下：

<template>
  <ul>
    <li v-for="product in products" :key="product.id">
      {{ product.name }}
      <button @click="addToCart(product)">Add to Cart</button>
    </li>
  </ul>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    products: {
      type: Array,
      required: true
    }
  },
  methods: {
    addToCart(product) {
      this.$store.dispatch('addToCart', product)
    }
  }
})
</script>

2. 购物车

接下来，我们创建一个购物车组件。在components/Cart.vue文件中，代码如下：

<template>
  <ul>
    <li v-for="item in cartItems" :key="item.id">
      {{ item.name }}
      <span>{{ item.quantity }}</span>
      <button @click="removeFromCart(item)">Remove</button>
    </li>
  </ul>

  <div>Total: {{ total }}</div>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  setup() {
    const store = useStore()

    const cartItems = computed(() => store.getters['cart/cartItems'])
    const total = computed(() => store.getters['cart/total'])

    return {
      cartItems,
      total,
      removeFromCart(item) {
        store.dispatch('removeFromCart', item)
      }
    }
  }
})
</script>

3. Vuex Store

我们使用Vuex来管理购物车状态。在store/index.js文件中，代码如下：

import { createStore } from 'vuex'

const store = createStore({
  state: {
    cart: {
      cartItems: []
    }
  },
  getters: {
    'cart/cartItems': (state) => state.cart.cartItems,
    'cart/total': (state) => {
      return state.cart.cartItems.reduce((total, item) => total + item.price * item.quantity, 0)
    }
  },
  mutations: {
    'cart/addToCart': (state, product) => {
      const existingItem = state.cart.cartItems.find(item => item.id === product.id)
      if (existingItem) {
        existingItem.quantity += 1
      } else {
        state.cart.cartItems.push({ ...product, quantity: 1 })
      }
    },
    'cart/removeFromCart': (state, product) => {
      const index = state.cart.cartItems.findIndex(item => item.id === product.id)
      if (index !== -1) {
        state.cart.cartItems.splice(index, 1)
      }
    }
  }
})

export default store

4. App.vue

最后，我们在App.vue文件中，将商品列表和购物车组件组合起来：

<template>
  <div>
    <h1>Shopping Cart</h1>
    <product-list :products="products"></product-list>
    <cart></cart>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import ProductList from './components/ProductList.vue'
import Cart from './components/Cart.vue'

export default defineComponent({
  components: {
    ProductList,
    Cart
  },
  data() {
    return {
      products: [
        { id: 1, name: 'Apple', price: 10 },
        { id: 2, name: 'Orange', price: 5 },
        { id: 3, name: 'Banana', price: 3 }
      ]
    }
  }
})
</script>