DAY 14 - 狀態 (State) & Pinia 狀態管理工具

今日介紹 Vue.js 狀態及狀態管理工具，這篇比較偏觀念我們會先從基本概念，先了解狀態再到了解狀態管理工具，再學會狀態管理工具使用，相信會更好理解、更好上手，才不會霧煞煞。

什麼是狀態 State ?

首先在了解狀態管理工具前，我們先認識一下狀態 (State) ， 狀態簡單來說指的是數據、資料、或是一種顯示的狀態，聽起來很抽象對不對， 在簡單一點你可以理解為 狀態 = 各種資料 DATA ，來看看一些狀態使用範例 :

例如 : 使用者狀態(登入登出)、購物車狀態、資料狀態，一般我們會使用 Cookie/local storage/session 儲存各種狀態，在 Vue.js 裡我們會有個狀態儲存庫可以管理共通狀態。

Vue.js 核心概念響應式數據

Vue.js 是一種操作資料數據的框架，其中有個核心概念就是響應式數據，我們可以運用狀態儲存元件的各種資訊，將它顯示到 View 畫面上，當狀態(Data)更新時這時 View 也會同時更新。

為什麼需要狀態管理工具 ?

狀態管理工具是一種跨元件及管理共用狀態的工具，可以將我們的狀態集中管理我們前面學會了父子元件溝通方式 props 、 emit ，無論是外傳內 props 、還是內傳外 emit 都難不倒我們了，那什麼情況下還會用到狀態管理工具呢 ?

組件就像個家庭一樣會有父與子，也會有不同家庭及孩子

• 父與子的溝通，我們會使用 props 、 emit
• 跨家庭(元件)溝通，就會使用狀態管理工具 Pinia 統一管理

把 Vue 元件想像成家庭是不是更好理解，直系溝通(父子)就是會用 emit、prop，同輩溝通(兄弟、朋友、鄰居)，就會使用狀態管理工具統一管理，這樣可以避免傳 狀態(Data) 的困擾。

想像一下如果不使用狀態管理工具，光是 emit、prop 我要傳好多層才能傳到

狀態管理工具主要管理哪些狀態 :

• 跨元件狀態管理
• 共用狀態管理(常用的共用狀態，像是購物車、Data、使用者狀態等等)