前言
- Pinia基本使用见上一篇文章：传送门点这里
- 效果展示：
Pinia + Vue3
一、功能介绍
- 借鉴vuex官方例子修改
- 本例子分为视频展示列表与购物车内容展示两个主要模块
- 通过Pinia创建的实例来对商品的状态进行控制
二、创建步骤
1.创建API接口模拟数据
- 由上篇文章创建好vite项目后，src下对应的层级结构为：
- shop.ts
代码如下：
export interface IProducts {
id: number;
title: string;
price: number;
inventory: number; //库存
}
const _products: IProducts[] = [
{
id: 1, title: "牛仔裤", price: 122, inventory: 2 },
{
id: 2, title: "卫衣", price: 222, inventory: 5 },
{
id: 3, title: "运动鞋", price: 322, inventory: 6 },
];
// wait，封装了promise的定时器
export const getProducts = async () => {
await wait(100);
// 模拟接收数据的请求
return _products;
};
export const buyProducts = async () => {
await wait(100);
// 模拟结算后发送请求
return Math.random() > 0.5;
};
async function wait(delay: number) {
return new Promise((resolve, reject) => {
setTimeout(resolve, delay);
});
}
2.页面文件
- productsList.vue
<template>
<div>
<ul>
<li v-for="i in ProductsStore.allProducts">
名称:{
{
i.title }}——{
{
i.price }}元
<button
:disabled="i.inventory < 1"
@click="cartStore.addProductToCart(i)"
>
添加到购物车
</button>
<br />
<br />
</li>
</ul>
</div>
</template>
<script setup lang="ts">
import {
useProductsStore } from "@/store/products";
import {
useCartStore } from "@/store/cart";
// 读取数据
const ProductsStore = useProductsStore();
// 操作actions中的get函数，初始化allProducts的值，取出使用
ProductsStore.getAllProducts();
// 添加到购物车
const cartStore = useCartStore();
// cartStore.addProductToCart();
</script>
<style scoped></style>
- shoppingCart.vue
<template>
<div class="cart">
<h2>你的购物车</h2>
<p>请添加商品到购物车中</p>
<ul>
<li v-for="c in cartStore.cartProducts">
名称:{
{
c.title }}——价格:{
{
c.price }}——数量:{
{
c.quantity }}
</li>
</ul>
<p>商品总价: {
{
cartStore.sum }}元</p>
<p>
<button @click="cartStore.check">结算</button>
</p>
<p v-if="cartStore.isSettle === 1">结算成功</p>
<p v-else-if="cartStore.isSettle === 0">结算失败</p>
</div>
</template>
<script setup lang="ts">
import {
useCartStore } from "@/store/cart";
const cartStore = useCartStore();
</script>
<style scoped></style>
- App.vue
<script setup lang="ts">
import ProductsList from "@/components/productsList.vue";
import ShoppingCart from "@/components/shoppingCart.vue";
</script>
<template>
<div style="text-align: left">
<h1>Vue3+Pinia—购物车实例</h1>
<hr />
<h2>商品列表</h2>
<ProductsList />
<hr />
<ShoppingCart />
</div>
<!-- <div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://vuejs.org/" target="_blank">
<img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
</a>
</div> -->
<!-- <HelloWorld /> -->
</template>
<style scoped></style>
3.创建Store
- products.ts
import {
defineStore } from "pinia";
import {
IProducts, getProducts } from "@/api/shop";
export const useProductsStore = defineStore("products", {
state: () => {
return {
// 默认是空类型，设置allProducts类型为IProducts
allProducts: [] as IProducts[],
};
},
actions: {
async getAllProducts() {
// res是IProducts类型的数据，不能将其赋值给allProducts,所以要将allProducts赋值赋值为一样的数据类型
const res = await getProducts();
this.allProducts = res;
},
decProducts(product: IProducts) {
const res = this.allProducts.find((p) => p.id === product.id);
// 如果有，则减库存
if (res) {
res.inventory--;
}
},
},
getters: {
},
});
- cart.ts
import {
IProducts, buyProducts } from "@/api/shop";
import {
defineStore } from "pinia";
import {
useProductsStore } from "@/store/products";
// 1. ‘ & ’合并类型,将CartProduct与IProducts合并，表示接口类型合并
// 使用omit过滤合并对象中不需要的类型：Omit<要合并的接口类型,'不需要的过滤对象'>
// 如 type C={} & Oimit(a,'b'):表示C类型与a类型合并，同时使用Omit过滤掉不需要的b属性
// 属性只剩下{quantity,id,price,title}
type CartProduct = {
quantity: number;
} & Omit<IProducts, "inventory">;
// actions封装逻辑，
export const useCartStore = defineStore("cart", {
state: () => {
return {
cartProducts: [] as CartProduct[],
isSettle: 2,
};
},
getters: {
// 计算总账单
sum() {
let s = 0;
for (let i of this.cartProducts) {
// console.log(i);
s = s + i.price * i.quantity;
}
return s;
},
},
actions: {
addProductToCart(products: IProducts) {
console.log("addProductToCart", products);
// 1.看商品是否有库存
if (products.inventory < 1) {
return;
}
// 2.检查购物车是否有该商品
const carItems = this.cartProducts.find((p) => p.id === products.id);
// 3，有则让商品数量+1
if (carItems) {
// 如果有这个商品则新建一个变量原来存储当前商品数量
// carItems.数量++；但是IProducts里无该类型，所以要加一个quantity表示新类型
carItems.quantity++;
}
// 4.没有则添加到购物车列表
else {
this.cartProducts.push({
id: products.id,
title: products.title,
price: products.price,
quantity: 1,
});
}
// 更新商品库存
const productsStore = useProductsStore();
productsStore.decProducts(products);
},
// 判断结算是否成功
async check() {
const res = await buyProducts();
if (res) {
this.isSettle = 1;
} else {
this.isSettle = 0;
}
},
},
});
更多源码见Git地址
总结
- 借用了vuex官方的例子来改造
- pinia比vuex轻便很多，不需要操作mutations