前言

Vue 文件常常出現 "state" 這個單字，像是在 Reactivity Fundamentals 篇章中，會用 "state"（狀態）這個字來描述響應式的「變數」：

Declaring Reactive State

import { reactive } from 'vue'

const state = reactive({ count: 0 })

在 Form Input Bindings 篇章

When dealing with forms on the frontend, we often need to sync the state of form input elements with corresponding state in JavaScript.

<input
  :value="text"
  @input="event => text = event.target.value">

初入框架的我，是第一次遇到 "state"（狀態）這個說法。
所以到底什麼是 "state"（狀態）啊？

什麼是狀態

Vue 文件裡提到「狀態(State)」是 the source of truth that drives our app。

The state, the source of truth that drives our app.

「狀態」泛指驅動整個網站(app)的事實。

嗯...再試著講得白話一點。
我覺得是從宏觀的角度，看待網頁開發中使用到的「資料」跟「變數」。

Ｗhy not 「data」？

我不太確定在認識「狀態（state）」之前，大家會用什麼詞去形容在網站或元件中使用到的「資源」，我自己一開始想到的是「資料（data）」，但一般在程式語言中提到「資料（data）」，會直接想到從資料庫（database）拿到的資料，例如：users 或 rooms。
確實，從 API 拿到的「資料（data）」通常都是網站依賴的狀態，會根據拿回來的資料去渲染畫面。

但是，驅動網站的並不是只有從資料庫拿回來的資料。

我覺得用 isLogin 這個變數，會比較好理解為什麼是用「狀態（state）」這個詞，又何謂驅動網頁(App)的事實。
在 isLogin 這個變數內，我們儲存的是使用者在網站上的「是否登入」的「狀態」，而這個「是否登入的狀態」會驅動整個網站，進而顯示或執行對應的內容。

仔細想想，像 isLogin 這個變數儲存的，反而不像「資料（data）」，它確實更適合用「狀態（state）」來說明，對吧？

狀態（state）的說法更宏觀，泛指所有驅動網頁的事實，也就是 Vue 官方文件所謂的「the source of truth that drives our app」。

元件狀態管理

理想狀態下，每個元件(.vue)之間互相獨立，自己管理自己的狀態(State)。
在元件內：

• 由自己的狀態(State)去驅動畫面(View)
• 畫面(View)呈現給使用者操作(Action)
• 使用者的動作(Action)更動狀態(State)。

就像剛開始在 SFC 檔內做的練習：

• 將元件初始狀態定義在 <script> 內，Vue 會根據狀態，將元件內容渲染到畫面上
• 使用者操作畫面時，會改變響應式狀態
• Vue 會響應狀態的變化，重新渲染畫面

但在實際開發上，事情往往沒有那麼簡單，常常會遇到需要共用狀態的情形：

1. 專案有多個元件的畫面(View)，依賴同一個共用狀態(State)
2. 專案有多個元件的使用者操作(Action)會改動到同一個狀態(State)

像是 userInfo（使用者資訊）或isLogin（是否登入），可以想像很多元件都需要共用這兩個狀態，來驅動呈現元件畫面，當有多個元件需要共用同一個狀態時，通常會將狀態提昇，放到上層元件中，但當共用狀態變多，狀態的管理就會變得很麻煩。

狀態管理器就是將共用的狀態抽出來，放到 store 內統一進行管理，每次取用都可以直接從 store 拿，每次修改都可以直接透過在 store 內定義的方法修改。

什麼時候要開始學狀態管理器？

當你開始發現有剛剛講到的狀況：

1. 當專案有多個元件，依賴同一個共用狀態
2. 當專案有多個元件的操作會改動到同一個狀態

並且造成管理上的困擾的時候，就可以考慮使用狀態管理器。
通常會是在開始接 API 後，比起在各個元件發 API 去取用/修改狀態，一般更傾向在狀態管理器的 store 內統一管理：從 store 內的方法去發 API，而拿回來的資料也會存在 store 內，所有元件都可以直接和 store 互動。

還不清楚 store 是什麼沒關係，明天預計會進入狀態管理器（Pinia）的篇章了！

參考資料

Vue Doc - State Management