vue3 pinia实现购物车

对于Vue3的应用程序，使用Pinia可以方便地实现购物车功能。Pinia是一个基于Vue3的状态管理库，它提供了一种可扩展的状态管理方案，使得开发者可以更轻松地管理应用程序的状态。

步骤如下：

1. 安装Pinia

使用npm或yarn安装Pinia

npm install pinia

2. 创建store

在src目录下创建一个store文件夹，然后在其中创建一个cart.js文件，用于存储购物车相关的状态和方法。代码演示：

import { defineStore } from 'pinia';

export const useCartStore = defineStore({
  id: 'cart',
  state: () => ({
    items: [],
  }),
  getters: {
    totalPrice() {
      return this.items.reduce((total, item) => total + item.price * item.quantity, 0);
    },
  },
  actions: {
    addItem(item) {
      const existingItem = this.items.find((i) => i.id === item.id);
      if (existingItem) {
        existingItem.quantity += item.quantity;
      } else {
        this.items.push(item);
      }
    },
    removeItem(item) {
      this.items = this.items.filter((i) => i.id !== item.id);
    },
    clearCart() {
      this.items = [];
    },
  },
});

在这个文件中，我们使用defineStore方法来定义一个名为useCartStore的store，其中包含了items、totalPrice、addItem、removeItem、clearCart这些状态和方法。

3. 在组件中使用store

接下来，在需要使用购物车的组件中，可以通过useStore方法引入我们刚刚创建的useCartStore。代码演示：

<template>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} x {{ item.quantity }} - {{ item.price }}元
        <button @click="removeItem(item)">删除</button>
      </li>
    </ul>
    <p v-if="totalPrice">总价：{{ totalPrice }}元</p>
    <p v-else>购物车为空</p>
    <button @click="clearCart">清空购物车</button>
  </div>
</template>

<script>
import { useStore } from 'pinia';
import { useCartStore } from '@/store/cart';

export default {
  setup() {
    const cartStore = useStore(useCartStore);

    return {
      items: cartStore.items,
      totalPrice: cartStore.totalPrice,
      addItem: cartStore.addItem,
      removeItem: cartStore.removeItem,
      clearCart: cartStore.clearCart,
    };
  },
};
</script>

在这个组件中，我们使用useStore方法引入了useCartStore，并将其中的items、totalPrice、addItem、removeItem、clearCart等状态和方法绑定到了组件的data选项中，以便在模板中使用。

4. 在其他组件中使用store

在其他需要使用购物车的组件中，也可以使用useStore方法引入useCartStore，并通过访问其中的状态和方法来实现购物车功能。可以实现多个组件共享同一个store的状态和方法。

这样，我们就可以轻松地使用Pinia实现购物车功能了。使用Pinia，我们可以更清晰地管理状态和方法，避免了在组件中传递状态和方法的繁琐操作，提高了应用程序的可维护性和扩展性。