Vue3组合式API与Pinia状态管理实战：构建响应式电商购物车

Vue3组合式API与Pinia状态管理实战：构建响应式电商购物车

在Vue3的世界里，组合式API（Composition API）和Pinia状态管理工具的组合，让构建复杂应用变得更加优雅和高效。今天，我们就通过一个电商购物车的实例，来看看如何利用这些现代前端技术打造一个响应式的购物体验。

为什么选择组合式API与Pinia？

Vue2的选项式API在处理复杂逻辑时，会将相关功能分散在data、methods、computed等不同选项中，导致代码组织不够直观。而组合式API允许我们将相关逻辑组合在一起，让代码更具可读性和复用性。Pinia作为Vue3官方推荐的状态管理库，比Vuex更轻量、更直观，特别适合中小型应用。

实战步骤：构建响应式购物车

1. 安装与配置Pinia

首先需要安装Pinia：

npm install pinia

然后在main.js中配置：

import { createApp } from \'vue\'
import { createPinia } from \'pinia\'
import App from \'./App.vue\'

const app = createApp(App)
app.use(createPinia())
app.mount(\'#app\')

2. 创建购物车Store

使用Pinia创建一个购物车store，定义商品列表、添加商品、移除商品等功能：

import { defineStore } from \'pinia\'
import { ref, computed } from \'vue\'

export const useCartStore = defineStore(\'cart\', () => {
  const items = ref([]) // 购物车商品
  const total = computed(() => items.value.reduce((sum, item) => sum + item.price * item.quantity, 0)) // 总价
  const itemCount = computed(() => items.value.reduce((sum, item) => sum + item.quantity, 0)) // 商品总数

  function addItem(product) {
    const existingItem = items.value.find(item => item.id === product.id)
    if (existingItem) {
      existingItem.quantity++
    } else {
      items.value.push({...product, quantity: 1})
    }
  }

  function removeItem(productId) {
    const index = items.value.findIndex(item => item.id === productId)
    if (index > -1) {
      items.value.splice(index, 1)
    }
  }

  return { items, total, itemCount, addItem, removeItem }
})

3. 在组件中使用组合式API

在商品列表组件中，我们可以这样使用购物车store：

<template>
  <div v-for=\"product in products\" :key=\"product.id\">
    <h3>{{ product.name }} - ¥{{ product.price }}</h3>
    <button @click=\"addToCart(product)\">加入购物车</button>
  </div>
</template>

<script setup>
import { useCartStore } from \'@/stores/cart\'
import { products } from \'@/data/products\'

const cartStore = useCartStore()

function addToCart(product) {
  cartStore.addItem(product)
}
</script>

4. 购物车组件的实现

购物车组件可以实时显示商品列表和总价：

<template>
  <div>
    <h2>购物车 ({{ cartStore.itemCount }}件)</h2>
    <ul>
      <li v-for=\"item in cartStore.items\" :key=\"item.id\">
        {{ item.name }} x {{ item.quantity }} - ¥{{ item.price * item.quantity }}
        <button @click=\"cartStore.removeItem(item.id)\">移除</button>
      </li>
    </ul>
    <p>总计: ¥{{ cartStore.total }}</p>
  </div>
</template>

<script setup>
import { useCartStore } from \'@/stores/cart\'
const cartStore = useCartStore()
</script>

优势总结

• 逻辑集中：组合式API将购物车相关的状态和方法组织在一起，代码更清晰。
• 响应式更新：Pinia的自动响应式确保购物车数据变化时界面实时更新。
• 类型安全：配合TypeScript可以获得更好的类型提示和开发体验。
• 易于测试：组合式API的函数式风格让单元测试变得简单直接。

通过这个实战案例，可以看到Vue3组合式API与Pinia的强大之处。它们不仅简化了代码结构，还提高了应用的可维护性和扩展性。无论是购物车还是其他复杂状态管理场景，这套组合都能让开发过程更加愉快高效。