Vue3 + ts + pinia 写的购物车，vite ,webpacke

上图：创建 Vue3指令     vue create [这里是文件名字]进去之后自己选这Vue3  ，千万不要选择Vuex  因为会冲突

 

第一步  创建 vue3项目文件且需要配置pinai，也可以去官方上进行安装教程

npm install pinia --save //安装pinia
npm install pinia-plugin-persist --save //安装pinia-plugin-persist，数据持久化插件

或者

yarn add pinia

接下来是重点啦上

这是我的 package.json   文件可以复制上去 

然后在吧你的node_models删掉,在 下载  npm i 或者  cnpm i

{
  "name": "pinia",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "pinia": "^2.0.23",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.0.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "typescript": "~4.1.5"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

在App.vue 中写：

<template>
  <h1> Pinia - 购物车实例2</h1>
  <hr>
  <h2>商品列表</h2>
  <ProductList></ProductList>
  <hr>
  <ShoppingCart></ShoppingCart>
</template>

<script lang="ts" setup>
import ProductList from '@/components/ProductList.vue'
import ShoppingCart from '@/components/ShoppingCart.vue'
</script>
<style>

</style>

 在main.vue 中写：

import { createApp } from 'vue'
import App from './App.vue'

import { createPinia } from 'pinia'


const pinia = createPinia()

createApp(App).use(pinia).mount('#app')

 在 src 中创建 store 且在里面创建：

cart.ts 

import { buyProducts, IProduct } from '@/api/shop'
import { defineStore } from 'pinia'
import { useProductsStore } from './products'
type cartProduct = {
    quantity: number
} & Omit<IProduct, 'inventory'>

export const useCartStore = defineStore('cart', {
    state: () => {
        return {
            cartProducts: [] as cartProduct[], //购物车商品列表
            checkoutStatus: null as null | string
        }
    },
    getters: {
        totalPrice(state) {
            return state.cartProducts.reduce((total, item) => {
                return total + item.price * item.quantity
            }, 0)
        }
    },
    actions: {
        addProductCart(product: IProduct) {
            console.log('addProductToCart', product);

            // 看商品有没有库存
            if (product.inventory < 1) {
                return
            }
            //检查购物车中是否已有该商品
            const cartItem = this.cartProducts.find(item => item.id === product.id)
            // 如果有则让商品的数量 +1
            if (cartItem) {
                cartItem.quantity++
            } else {
                //如果没有则添加到购物车列表中
                this.cartProducts.push({
                    id: product.id,
                    title: product.title,
                    price: product.price,
                    quantity: 1  // 第一次加到购物车的商品的数量就是  1 
                })
            }
            // 更新商品的库存

            // product.inventory--       //  不建议这样使用

            const productsStore = useProductsStore()
            productsStore.decrementProduct(product)
        }
        ,
        async checkout() {
            const ret = await buyProducts()
            this.checkoutStatus = ret ? '成功' : '失败'
            if(ret){
                this.cartProducts = []
            }
        }
    }

})

products.ts

import { defineStore } from 'pinia'
import { getProducts, IProduct } from '@/api/shop'



export const useProductsStore = defineStore('products', {
    state: () => {
        return {
            // 这里有一个ts  的类型问题   所有我们要通过 api  中的类型导入过来  告诉 all 的类型是   IProduct[]
            all: [] as IProduct[] // 所有的商品列表  
        }
    },
    getters: {

    },
    actions: {
        async loadAllProducts() {
            const ret = await getProducts()
            // 是  this.all 出现的 ts 类型问题
            this.all = ret
        },

        decrementProduct(product: IProduct) {
            const ret = this.all.find(item => item.id === product.id)
            if (ret) {
                ret.inventory--
            }
        }

    }
})

 在 components 中 创建组件 ：

ShoppingCart.vue  

<template>
    <div class="cart">
        <h1>你的购物车</h1>
        <p>
        <h4>请添加一些商品到购物车 :</h4>
        </p>
        <ul class="ul1">
            <li v-for="item in cartStore.cartProducts">商品名称：{{ item.title }} - 商品价格：{{ item.price }} X
                商品数量：{{ item.quantity }}</li>
        </ul>
        <p>商品总价：{{ cartStore.totalPrice }}</p>
        <p>
            <button @click="cartStore.checkout">结算</button>
        </p>
        <p v-show="cartStore.checkoutStatus">
            结算：{{ cartStore.checkoutStatus }}
        </p>
    </div>
</template>
<script lang="ts" setup>


import { useCartStore } from '../store/cart';
const cartStore = useCartStore()



</script>
<style>
.ul1 {
    padding: 50px 10px;
    border: 1px solid rgb(255, 0, 0);
}
</style>

ProductList.vue 

<template>
    <ul>
        <li v-for="item in productsStore.all">
            商品名称：{{ item.title }}<br>
            商品价格：{{ item.price }}<br>
            <button :disabled="!item.inventory" @click="cartStore.addProductCart(item)">添加到购物车</button>
        </li>
    </ul>
</template>
<script lang="ts" setup>
// 进行 pinia 拿到导出的数据    ， 且数据可以进行其他的方法进行   解构  ，但是因为数据少所有不需要 解构
import { useProductsStore } from '../store/products'
import { useCartStore } from '../store/cart'


const productsStore = useProductsStore()
const cartStore = useCartStore()



// 加载所有数据
productsStore.loadAllProducts()
</script>
<style>
ul {
    list-style-type: none;
    font-weight: 700;
    font-size: 25px;
}
</style>

 在src中创建   api  在里面创建 shop.ts：

export interface IProduct {
    id: number,
    title: string,
    price: number,
    inventory: number //库存数量
}


const _products: IProduct[] = [
    { id: 1, title: '苹果', price: 8888.01, inventory: 2 },
    { id: 2, title: '华为', price: 5666.99, inventory: 10 },
    { id: 3, title: '小米', price: 4999.99, inventory: 5 }
]

// 模拟异步效果
export const getProducts = async () => {
    await wait(100) // 加的延迟
    return _products
}
export const buyProducts = async () => {
    await wait(100) // 订单结算的延迟  ，模拟异步操作
    return Math.random() > 0.5
}

// 封装了 Promise 版本的定时器   wait   
async function wait(delay: number) {
    return new Promise((resolve) => setTimeout(resolve, delay))
}

然后就完成了  启动就好   npm run serve