用pinia写一个购物车

好的，首先我们需要安装 `pinia` 和 `vue`：

npm install pinia vue

接着我们可以创建一个 `store`：

import { defineStore } from 'pinia'

export interface Product {
  id: number
  name: string
  price: number
}

export const useStore = defineStore({
  id: 'cart',
  state: () => ({
    products: [] as Product[],
  }),
  getters: {
    totalPrice(): number {
      return this.products.reduce((total, product) => total + product.price, 0)
    },
  },
  actions: {
    addProduct(product: Product): void {
      this.products.push(product)
    },
    removeProduct(productId: number): void {
      this.products = this.products.filter((product) => product.id !== productId)
    },
    clearCart(): void {
      this.products = []
    },
  },
})

上面的代码定义了一个 `Product` 类型以及一个 `useStore` 函数，它返回一个 `store` 对象，包含了 `products` 数组、`totalPrice` 计算属性以及三个 `action` 分别用于添加商品、删除商品以及清空购物车。

现在我们可以在组件中使用这个 `store`：

<template>
  <div>
    <h1>购物车</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
        <button @click="removeProduct(product.id)">删除</button>
      </li>
    </ul>
    <p>总价：{{ totalPrice }}</p>
    <button @click="clearCart">清空购物车</button>
  </div>
</template>

<script lang="ts">
import { computed } from 'vue'
import { useStore, Product } from './store'

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

    const products = computed(() => store.products)
    const totalPrice = computed(() => store.totalPrice)

    function removeProduct(productId: number) {
      store.removeProduct(productId)
    }

    function clearCart() {
      store.clearCart()
    }

    return {
      products,
      totalPrice,
      removeProduct,
      clearCart,
    }
  },
}
</script>

上面的代码中，我们使用了 `useStore` 函数获取了 `store` 对象，并且使用 `computed` 计算属性获取了 `products` 数组和 `totalPrice`。接着定义了 `removeProduct` 和 `clearCart` 方法，用于调用 `store` 中的对应 `action`。最后在模板中展示了购物车中的商品列表、总价以及删除商品和清空购物车的按钮。

现在，我们就完成了一个简单的购物车应用。