diff --git a/public/product.json b/public/product.json
new file mode 100644
index 0000000..e69de29
diff --git a/src/App.vue b/src/App.vue
index d74c13c..64429bf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,26 +1,18 @@
-
+
diff --git a/src/api/shop.ts b/src/api/shop.ts
new file mode 100644
index 0000000..6ef9b52
--- /dev/null
+++ b/src/api/shop.ts
@@ -0,0 +1,35 @@
+export interface IProduct {
+ id: string
+ name: string
+ price: number
+ inventory: number
+}
+
+const _products: IProduct[] = [
+ {
+ "id": "0",
+ "name": "IPad Pro",
+ "price": 5999,
+ "inventory": 2
+ },
+ {
+ "id": "1",
+ "name": "IPhone 13 Pro",
+ "price": 7999,
+ "inventory": 3
+ }
+]
+
+export const getProducts = async () => {
+ await wait(1000)
+ return _products
+}
+
+export const buyProducts = async () => {
+ await wait(1000)
+ return Math.random() > 0.5
+}
+
+async function wait( delay: number ) {
+ return new Promise(( resolve ) => setTimeout(resolve, delay))
+}
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 4c1cd5b..60b57b4 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -9,7 +9,7 @@
+
+
diff --git a/src/store/cart.ts b/src/store/cart.ts
new file mode 100644
index 0000000..c1d35e6
--- /dev/null
+++ b/src/store/cart.ts
@@ -0,0 +1,57 @@
+import { defineStore } from "pinia";
+import { buyProducts, IProduct } from "@/api/shop";
+import { useProductStore } from "@/store/product";
+
+type CartProduct = {
+ quantity: number
+} & IProduct
+
+enum checkoutStatus {
+ PENDING = "未结算",
+ SUCCESS = "结算成功",
+ FALSE = "结算失败"
+}
+
+export const useCartStore = defineStore('cart', {
+ state: () => ( {
+ cartProducts: [] as CartProduct[],
+ checkStatus: checkoutStatus.PENDING
+ } ),
+ getters: {
+ totalPrice( state ) {
+ return state.cartProducts.reduce(( pre, cur ) => {
+ return pre + cur.price * cur.quantity
+ }, 0)
+ }
+ },
+ actions: {
+ addProductToCart( product: IProduct ) {
+ if ( product.inventory < 1 ) {
+ return
+ }
+ const cartItem: CartProduct | undefined = this.cartProducts.find(item => item.id === product.id)
+ if ( cartItem ) {
+ cartItem.quantity++
+ } else {
+ this.cartProducts.push({
+ id: product.id,
+ name: product.name,
+ inventory: product.inventory,
+ price: product.price,
+ quantity: 1
+ })
+ }
+ const productStore = useProductStore()
+ productStore.decrementProductInventory(product)
+ },
+ async checkout() {
+ const result = await buyProducts()
+ if ( result ) {
+ this.checkStatus = checkoutStatus.SUCCESS
+ this.cartProducts = []
+ } else {
+ this.checkStatus = checkoutStatus.FALSE
+ }
+ }
+ }
+})
diff --git a/src/store/product.ts b/src/store/product.ts
new file mode 100644
index 0000000..f6068f3
--- /dev/null
+++ b/src/store/product.ts
@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+import { getProducts, IProduct } from "@/api/shop";
+
+export const useProductStore = defineStore('product', {
+ state: () => ( {
+ all: [] as IProduct[]
+ } ),
+ getters: {},
+ actions: {
+ async loadAllProducts() {
+ this.all = await getProducts()
+ },
+ decrementProductInventory( product: IProduct ) {
+ const productItem = this.all.find(item => item.id === product.id)
+ if ( productItem ) {
+ productItem.inventory--
+ }
+ }
+ }
+})