Pinia

在 Vue.js 生態系統中，Pinia 是目前官方推薦的狀態管理函式庫。不過，當我們透過 Pinia 儲存資料時，這些資料究竟放在哪裡？本文拆解 Pinia 的運作原理，以及它如何處理資料儲存。 Pinia 的核心概念Pinia 把應用程式的狀態切成獨立的「store」，每個 store 負責管理一塊特定的狀態。這種設計讓狀態管理更模組化，也比較容易維護。 定義一個 store 的基本寫法： 12345678910111213import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, name: 'guest', }), actions: { increment() { this.count++ }, },
...

在 Vue.js 的狀態管理領域，Pinia 和 Vuex 是兩個主要的選擇。兩者解決的問題相同，但設計理念和使用方式有顯著差異。本文逐項比較它們的差異，幫你判斷哪個更適合手邊的專案。 1. 起源與發展Vuex Vuex 是 Vue.js 的官方狀態管理函式庫，於 2015 年發布。 遵循 Flux 架構，設計初衷是處理大型複雜應用的狀態管理。 Pinia Pinia 由 Vue 核心團隊成員 Eduardo San Martin Morote 開發。 最初作為 Vuex 5 的概念驗證而建立，後來發展成獨立專案。 Vue 3 發布後，Pinia 迅速獲得社群青睞，最終成為 Vue 官方推薦的狀態管理方案。 2. 核心概念Vuex Store：單一狀態樹，作為應用的唯一資料來源。 State：存儲應用的響應式狀態。 Getters：從 store 派生出的狀態。 Mutations：用於修改狀態的同步函式。 Actions：可包含非同步操作的函式，用於提交 mutation。 Modules：將 store 拆分成模組，每個模組擁有自己的 state、mutation、act...

引言Vue 應用規模一大，狀態管理就會開始讓人頭痛。Pinia 是 Vue 官方推薦的狀態管理函式庫，設計目標是型別安全、直觀，且不需要 Vuex 那套繁瑣的 mutation 流程。本文涵蓋 Pinia 的核心概念、進階特性與常見實踐，從安裝到插件系統都會走一遍。 什麼是Pinia?Pinia 是新一代的 Vue 狀態管理函式庫，定位上取代 Vuex。由 Vue 核心團隊成員 Eduardo San Martin Morote 建立，在 Vue 3 中成為官方推薦的狀態管理方案。 Pinia的主要特性: 直觀且簡潔的 API 完整的 TypeScript 支援 支援 Vue 2 和 Vue 3（Pinia v2；v3 起僅支援 Vue 3） 極小的套件大小 支援多個 Store 支援熱模組替換（HMR） 支援 Vue DevTools 插件系統可擴充 安裝和設置1npm install pinia 在 Vue 應用中引入 Pinia： 123456789import { createApp } from 'vue'import
...