feature: 购物车完整demo

src/components/HelloWorld.vue

@@ -9,7 +9,7 @@
 </template>
 <script lang="ts" setup>
 import { userMainStore } from "@/store";
-import { storeToRefs } from "pinia";
+import { storeToRefs } from 'pinia';
 
 const mainStore = userMainStore()
 console.log(mainStore.count)

src/components/ProductPage.vue

@@ -0,0 +1,35 @@
+<template>
+    <h2>Pinia —— 购物车示例</h2>
+    <hr>
+    <h3>商品列表</h3>
+    <ul>
+        <li v-for="item in productStore.all" :key="item.id">
+            <p>{{ item.name }} -- {{ item.price }} -- 库存：{{ item.inventory }}</p>
+            <button :disabled="item.inventory===0" @click="cartStore.addProductToCart(item)">添加到购物车</button>
+        </li>
+    </ul>
+    <hr>
+    <h3>你的购物车</h3>
+    <ul>
+        <li v-for="item in cartStore.cartProducts" :key="item.id">
+            <p>{{ item.name }} -- 价格 {{ item.price }} x {{ item.quantity }}</p>
+        </li>
+    </ul>
+    <p>商品总价：{{ cartStore.totalPrice }}</p>
+    <button @click="cartStore.checkout()">结算</button>
+    <p>{{ cartStore.checkStatus }}</p>
+</template>
+
+<script setup lang="ts">
+import { useProductStore } from "@/store/product";
+import { useCartStore } from "@/store/cart";
+
+const productStore = useProductStore()
+const cartStore = useCartStore()
+
+productStore.loadAllProducts()
+</script>
+
+<style scoped>
+
+</style>