六十天前端强化训练之第二十七天之Pinia 状态管理全解与购物车实战案例

=====欢迎来到编程星辰海的博客讲解======

看完可以给一个免费的三连吗，谢谢大佬！

Pinia%20%E6%B7%B1%E5%BA%A6%E8%A7%A3%E6%9E%90-toc" name="tableOfContents" style="margin-left:40px">一、Pinia 深度解析

Pinia%20%E6%A0%B8%E5%BF%83%E8%AE%BE%E8%AE%A1-toc" name="tableOfContents" style="margin-left:80px">1. Pinia 核心设计

2. 核心概念图解

3. Store 类型对比

Option Store（选项式）

Setup Store（组合式）

4. 响应式原理

二、购物车状态管理实战

1. 项目结构

2. 核心 Store 实现（stores/cart.js）

3. 商品列表组件（ProductList.vue）

4. 购物车组件（ShoppingCart.vue）

三、实现效果说明

四、学习要点总结

五、扩展阅读推荐

官方资源

优质文章

进阶教程

Pinia%20%E6%B7%B1%E5%BA%A6%E8%A7%A3%E6%9E%90" name="%E4%B8%80%E3%80%81Pinia%20%E6%B7%B1%E5%BA%A6%E8%A7%A3%E6%9E%90" style="background-color:transparent">一、Pinia 深度解析

Pinia%20%E6%A0%B8%E5%BF%83%E8%AE%BE%E8%AE%A1" name="1.%20Pinia%20%E6%A0%B8%E5%BF%83%E8%AE%BE%E8%AE%A1">1. Pinia 核心设计

Pinia 是 Vue 官方推荐的新一代状态管理库，具有以下核心优势：

TypeScript 原生支持：完整的类型推断和自动补全
模块化架构：天然支持代码分割和按需加载
轻量无冗余：相比 Vuex 减少 40% 的代码量
组合式 API：完美对接 Vue3 的组合式编程范式
Devtools 整合：完整的时间旅行调试支持

2. 核心概念图解

3. Store 类型对比

Option Store（选项式）

JAVASCRIPT

export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),getters: {double: (state) => state.count * 2,},actions: {increment() {this.count++},},
})

Setup Store（组合式）

JAVASCRIPT

export const useCounterStore = defineStore('counter', () => {const count = ref(0)const double = computed(() => count.value * 2)function increment() {count.value++}return { count, double, increment }
})

4. 响应式原理

Pinia 基于 Vue3 的 reactive() 实现响应式系统：

State 自动转换为 reactive 对象
Getters 使用 computed 实现计算缓存
Actions 作为状态操作方法

二、购物车状态管理实战

1. 项目结构

TEXT

/src├── stores│    └── cart.js├── components│    ├── ProductList.vue│    └── ShoppingCart.vue└── App.vue

2. 核心 Store 实现（stores/cart.js）

JAVASCRIPT

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'export const useCartStore = defineStore('cart', () => {// 状态定义const items = ref([]) // 购物车商品数组const taxRate = 0.1 // 税率（常量）// Getter（带参数的派生状态）const cartTotal = computed(() => items.value.reduce((sum, item) => sum + item.price * item.quantity, 0))const totalWithTax = computed(() => cartTotal.value * (1 + taxRate))// Action：添加商品（幂等操作）const addToCart = (product, quantity = 1) => {const existing = items.value.find(item => item.id === product.id)if (existing) {// 商品存在时增加数量existing.quantity += quantity} else {// 新商品添加购物车items.value.push({...product,quantity,addedAt: new Date().toISOString()})}}// Action：移除商品（支持完全移除和减少数量）const removeFromCart = (productId, quantity = 1) => {const index = items.value.findIndex(item => item.id === productId)if (index === -1) returnif (items.value[index].quantity <= quantity) {// 完全移除商品items.value.splice(index, 1)} else {// 减少商品数量items.value[index].quantity -= quantity}}// Action：清空购物车const clearCart = () => {items.value = []}return {items,cartTotal,totalWithTax,addToCart,removeFromCart,clearCart}
})

3. 商品列表组件（ProductList.vue）

VUE

<script setup>
import { useCartStore } from '@/stores/cart'const cartStore = useCartStore()
const products = [{ id: 1, name: 'Vue T-Shirt', price: 29.99 },{ id: 2, name: 'Pinia Mug', price: 15.50 },{ id: 3, name: 'Vuex Book', price: 39.99 }
]
</script><template><div class="product-list"><h2>Available Products</h2><div v-for="product in products" :key="product.id" class="product-item"><h3>{{ product.name }}</h3><p>Price: \${{ product.price.toFixed(2) }}</p><button @click="cartStore.addToCart(product)">Add to Cart</button></div></div>
</template>

4. 购物车组件（ShoppingCart.vue）

VUE

<script setup>
import { useCartStore } from '@/stores/cart'
import { storeToRefs } from 'pinia'const cartStore = useCartStore()
const { items, cartTotal, totalWithTax } = storeToRefs(cartStore)
</script><template><div class="shopping-cart"><h2>Shopping Cart</h2><div v-if="items.length === 0" class="empty-cart">Your cart is empty</div><div v-else><div v-for="item in items" :key="item.id" class="cart-item"><h3>{{ item.name }}</h3><p>Quantity: {{ item.quantity }}<button @click="cartStore.removeFromCart(item.id, 1)">-</button><button @click="cartStore.addToCart(item)">+</button></p><p>Price: \${{ (item.price * item.quantity).toFixed(2) }}</p><button @click="cartStore.removeFromCart(item.id, item.quantity)">Remove</button></div><div class="totals"><p>Subtotal: \${{ cartTotal.toFixed(2) }}</p><p>Tax (10%): \${{ (totalWithTax - cartTotal).toFixed(2) }}</p><p class="total">Total: \${{ totalWithTax.toFixed(2) }}</p></div><button @click="cartStore.clearCart" class="clear-btn">Clear Cart</button></div></div>
</template>

三、实现效果说明

（图示说明：用户添加商品、调整数量、删除商品时，各组件自动同步状态）

状态共享：多组件同时访问同一购物车状态
响应式更新：价格计算实时同步
操作隔离：商品增减逻辑集中管理
类型安全：完整的TS类型推断

四、学习要点总结

核心概念
- Store 作为状态容器
- State 定义应用状态
- Getters 实现派生数据
- Actions 封装业务逻辑

最佳实践

JAVASCRIPT

// 正确的状态解构方式
const { count } = storeToRefs(store)
// 错误的方式（破坏响应式）
const { count } = store

架构原则
- 单一职责：每个Store聚焦特定领域
- 低耦合：组件不直接操作其他Store
- 高内聚：相关逻辑集中管理

调试技巧

JAVASCRIPT

// 浏览器控制台访问
const store = useCartStore()
store.$patch({...})
store.$subscribe((mutation) => {console.log('状态变更:', mutation)
})

五、扩展阅读推荐

官方资源

Pinia 官方文档
Vue 状态管理指南
Pinia 与 Vuex 对比指南

优质文章

深入理解 Pinia 架构设计
企业级 Pinia 最佳实践
Pinia 插件开发指南
SSR 场景下的 Pinia 使用
Pinia 单元测试全攻略

进阶教程

JAVASCRIPT

// 持久化插件示例
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate'const pinia = createPinia()
pinia.use(createPersistedState({auto: true, // 自动持久化所有Storestorage: sessionStorage
}))

建议运行示例并通过 Vue Devtools 观察状态变更过程，加深理解。义和测试用例。