• 安裝npm i pinia
• 導入import { createPinia} from 'pinia'
• 注冊 app.use(createPinia())

使用

• index.ts

/*** 注冊容器*/ import { defineStore } from 'pinia'// 定義容器 // 參數1：容器的 id，必須唯一，可以理解為就是有名字的模塊 // 參數2：選項對象 export const useMainStore = defineStore('main', {// 類似組件的 data，用來存儲全局狀態的// 注意：// 1. 必須是函數，因為容器也要兼容 SSR 服務端渲染，避免多個請求數據交叉污染// 2. 必須是箭頭函數，這是為了 ts 類型推斷state: () => {return {count: 100}},// 類似組件的 computed 計算屬性，也有緩存功能// 參數1 就是 state 對象getters: {counter10 (state) {return state.count + 10}// 也可以在 getters 中使用 this，但是這種情況下必須手動標記 getter 的返回值類型// counter10 (): number {// return this.count + 10// }},// 類似組件的 methods，主要用來封裝操作邏輯// 在其中使用 this 操作容器數據，同步異步都支持actions: {incrementCount (a: string, b: number) {// this.count++setTimeout(() => {this.count++}, 1000)}} })

• counter.vue

<template><h2>Counter A</h2><p>{{ mainStore.count }}</p><p>{{ mainStore.counter10 }}</p><p><button @click="handleChangeState">修改 state 數據</button></p> </template><script setup lang="ts"> import { useMainStore } from '../store/index'// 調用得到容器對象 const mainStore = useMainStore()const handleChangeState = () => {// 方式一：// mainStore.count++// 方式二：批量更新// mainStore.$patch({// count: mainStore.count + 1// })// 方式三：在 action 中修改// Vuex 中調用 mutation 得 commit，調用 action 得 dispatch// action 同步異步操作都支持mainStore.incrementCount('a', 10) } </script>

• ProductList.vue

<template><ul><li v-for="item in all">{{ item.title }} - {{ item.price }}<br /><button:disabled="!item.inventory"@click="cartStore.addProductToCart(item)">添加到購物車</button></li></ul> </template><script setup lang="ts"> import { storeToRefs } from 'pinia' import { useProductsStore } from '../store/products' import { useCartStore } from '../store/cart'const productsStore = useProductsStore() const cartStore = useCartStore()// 異步加載更新數據 productsStore.loadAllProducts()// 數據解構 // 注意：這種寫法是有問題的，不是響應式的，只能拿到一次性的數據 // const { all } = productsStore// 響應式解構處理，內部其實是被 ref 包裹了 const { all } = storeToRefs(productsStore)console.log(all.value) </script>

• products.ts

/*** 注冊容器*/ import { defineStore } from 'pinia' import { getProducts, IProduct } from '../api/shop'export const useProductsStore = defineStore('products', {state: () => {return {all: [{ id: 1, title: 'xxx', price: 10, inventory: 100 }] as IProduct[] // 所以商品列表}},getters: {},actions: {async loadAllProducts () {const ret = await getProducts()this.all = ret},async decrementProduct (product: IProduct) {const p = this.all.find(item => item.id === product.id)if (p) {p.inventory--}}} })

• ShoppingCart

<template><div class="cart"><h2>你的購物車</h2><p><i>請添加一些商品到購物車.</i></p><ul><li v-for="item in cartStore.cartProducts">{{ item.title }} - {{ item.price }} x {{ item.quantity }}</li><!-- <li>商品名稱 - 商品價格 x 商品數量</li><li>商品名稱 - 商品價格 x 商品數量</li> --></ul><p>商品總價: {{ cartStore.totalPrice }}</p><p><button @click="cartStore.checkout">結算</button></p><p v-show="cartStore.checkoutStatus">結算{{ cartStore.checkoutStatus }}.</p></div> </template><script setup lang="ts"> import { useCartStore } from '../store/cart'const cartStore = useCartStore() </script>

• shop.ts

export interface IProduct {id: number // 唯一標識title: string // 名稱price: number // 價格inventory: number // 庫存 }const _products: IProduct[] = [{ id: 1, title: 'iPad 4 Mini', price: 500.01, inventory: 2 },{ id: 2, title: 'H&M T-Shirt White', price: 10.99, inventory: 10 },{ id: 3, title: 'Charli XCX - Sucker CD', price: 19.99, inventory: 5 } ]/*** 獲取商品列表*/ 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) => setTimeout(resolve, delay)) }

• cart.ts

import { defineStore } from 'pinia' import { IProduct, buyProducts } from '../api/shop' import { useProductsStore } from './products' // 合并IProduct，但是去除掉inventory 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((price, item) => {return price + item.quantity * item.price}, 0)}},actions: {addProductToCart(product: IProduct) {this.checkoutStatus = null// this.cartProducts.push(product)// 商品是否有庫存if (product.inventory <= 0) {return}// 購物車中是否已有該商品const item = this.cartProducts.find(p => p.id === product.id)if (item) {// 如果有，則讓已有商品的數量 +1item.quantity++} else {// 如果沒有，則新增this.cartProducts.push({id: product.id,title: product.title,price: product.price,quantity: 1 // 剛加到購物車的商品的數量肯定是 1 個})}// 更新商品的庫存const productsStore = useProductsStore()productsStore.decrementProduct(product)},async checkout () {this.checkoutStatus = null // 充值結算狀態const ret = await buyProducts()if (ret) {this.checkoutStatus = '成功'this.cartProducts = [] // 清除購物車數據} else {this.checkoutStatus = '失敗'}}} })

總結

以上是生活随笔為你收集整理的pinia的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。