目錄

1. 什么是 Pinia？

2. 為什么需要 Pinia？

3. Pinia 的三個核心概念

State（狀態）- 存儲數據

Getters（計算屬性）- 處理數據

Actions（方法）- 修改數據

4. 創建一個簡單的 Store

5. 在組件中使用 Store

6. 再來一個示例

7. 在組件中的使用示例

8. Pinia 的優勢

9. 常見使用場景

10. 學習建議

---

1. 什么是 Pinia？

Pinia 就像一個全局的數據倉庫，讓不同的 Vue 組件能夠共享數據。

比喻：想象一個圖書館（Pinia），所有人（Vue組件）都可以去借書（讀取數據）、還書（修改數據）。

2. 為什么需要 Pinia？

問題場景：

// 組件A需要用戶信息
const userInfo = { name: '張三', age: 25 }// 組件B也需要這個用戶信息
// 組件C也需要這個用戶信息
// 怎么在這些組件之間共享數據？

解決方案：用 Pinia 存儲全局數據，所有組件都能訪問。

3. Pinia 的三個核心概念

State（狀態）- 存儲數據

state: () => ({currentType: 'type1',  // 當前機器類型userInfo: null,        // 用戶信息count: 0              // 計數器
})

理解：State 就是存放數據的地方，類似于組件的?data。

Getters（計算屬性）- 處理數據

getters: {// 根據當前類型獲取配置currentConfig: (state) => {return state.machineConfig[state.currentType]},// 判斷是否是成年人isAdult: (state) => {return state.userInfo?.age >= 18}
}

理解：Getters 就像計算屬性，基于 state 計算出新的值。

Actions（方法）- 修改數據

actions: {// 設置機器類型setMachineType(type) {this.currentType = type},// 設置用戶信息setUserInfo(info) {this.userInfo = info}
}

理解：Actions 就是修改 state 的方法，類似于組件的?methods。

4. 創建一個簡單的 Store

讓我們創建一個用戶信息的 Store：

// store/user.js
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {// 1. State - 存儲數據state: () => ({name: '',age: 0,isLogin: false}),// 2. Getters - 計算屬性getters: {// 獲取用戶顯示名稱displayName: (state) => {return state.name || '游客'},// 判斷是否成年isAdult: (state) => {return state.age >= 18}},// 3. Actions - 修改數據的方法actions: {// 登錄login(name, age) {this.name = namethis.age = agethis.isLogin = true},// 登出logout() {this.name = ''this.age = 0this.isLogin = false}}
})

5. 在組件中使用 Store

<!-- UserProfile.vue -->
<template><div><h1>用戶信息</h1><p>姓名：{{ userStore.displayName }}</p><p>年齡：{{ userStore.age }}</p><p>狀態：{{ userStore.isLogin ? '已登錄' : '未登錄' }}</p><p>{{ userStore.isAdult ? '成年人' : '未成年人' }}</p><button @click="handleLogin">登錄</button><button @click="handleLogout">登出</button></div>
</template><script setup>
import { useUserStore } from '@/store/user'// 獲取 store 實例
const userStore = useUserStore()// 登錄方法
const handleLogin = () => {userStore.login('張三', 25)
}// 登出方法
const handleLogout = () => {userStore.logout()
}
</script>

6. 再來一個示例

創建一個機型配置?Store：

export const useMachineStore = defineStore('machine', {// 存儲機器相關數據state: () => ({currentType: 'type1',  // 當前機器類型machineConfig: {       // 機器配置信息type1: { name: '無打印', features: ['query', 'payment'] },type2: { name: '報告打印', features: ['query', 'payment', 'reportPrint'] },type3: { name: '發票打印', features: ['query', 'payment', 'invoicePrint'] }}}),// 基于數據計算新值getters: {// 獲取當前機器配置currentConfig: (state) => {return state.machineConfig[state.currentType]},// 檢查是否支持某功能hasFeature: (state) => {return (feature) => {const config = state.machineConfig[state.currentType]return config.features.includes(feature)}}},// 修改數據的方法actions: {// 切換機器類型setMachineType(type) {this.currentType = type}}
})

7. 在組件中的使用示例

<!-- MachineInfo.vue -->
<template><div><h2>{{ machineStore.currentConfig.name }}</h2><p>支持的功能：</p><ul><li v-if="machineStore.hasFeature('query')">查詢功能</li><li v-if="machineStore.hasFeature('payment')">繳費功能</li><li v-if="machineStore.hasFeature('reportPrint')">報告打印</li></ul><button @click="switchMachine">切換機器類型</button></div>
</template><script setup>
import { useMachineStore } from '@/store/machine'const machineStore = useMachineStore()const switchMachine = () => {// 切換到下一個類型const types = ['type1', 'type2', 'type3']const currentIndex = types.indexOf(machineStore.currentType)const nextIndex = (currentIndex + 1) % types.lengthmachineStore.setMachineType(types[nextIndex])
}
</script>

8. Pinia 的優勢

1. 簡單易用：語法簡潔，容易理解。
2. 類型安全：支持 TypeScript。
3. 開發工具：有專門的調試工具。
4. 模塊化：每個功能可以創建獨立的 store。

9. 常見使用場景

• 用戶信息管理：登錄狀態、用戶資料。
• 主題設置：暗色模式、語言設置。
• 購物車：商品列表、總價計算。
• 全局配置：API 地址、系統設置。

10. 學習建議

1. 從簡單開始：先創建一個計數器 store。
2. 理解概念：state存數據，getters算數據，actions改數據。
3. 多練習：在實際項目中使用。
4. 看文檔：官方文檔很詳細。