useState 是 Nuxt 專為 SSR 設計的狀態管理工具。
1 核心概念 (Concept)
一般 ref()：
- •範圍：單一元件
- •生命週期：元件卸載（換頁）就消失
useState('key', init)：
- •範圍：整個應用程式
- •生命週期：換頁不消失（但 F5 重整會重置）
2 給 Claude Code 的中文指令 (Prompt) Prompt
我們要製作一個「全站主題色」的切換功能。你在首頁把顏色改成紅色，跳到關於頁，背景應該還是紅色的。
請複製以下指令給 Claude：
請使用 useState 實作一個跨頁面的主題色狀態管理：
- 建立/修改
app/composables/states.ts：- 匯出一個名為
useThemeColor的函數。 - 內部回傳
useState('color', () => 'white')(預設為白色)。
- 匯出一個名為
- 修改
app/app.vue：- 呼叫
useThemeColor取得顏色狀態。 - 將這個顏色狀態綁定到最外層
<div>的 style (例如backgroundColor)，這樣整個網站背景色都會跟著變。
- 呼叫
- 修改
app/pages/index.vue：- 放置三個按鈕：「變紅」、「變綠」、「變藍」。
- 點擊按鈕時，修改
useThemeColor的值。
- 修改
app/pages/about.vue(如果沒有請建立)：- 顯示一段文字：「目前的主題顏色是：
{{ color }}」。 - 這裡也要呼叫
useThemeColor來取得數值。
- 顯示一段文字：「目前的主題顏色是：
目標：在首頁換顏色，切換到關於頁時，顏色應該要保持,不能變回白色。
3 驗收重點 (Acceptance Criteria)
請檢查 Claude 完成後的結果：
程式碼檢查 (composables/states.ts)：
確認使用的是 useState 而不是 ref。
正確
return useState('color', () => 'white')錯誤 (這是區域變數，換頁會死)
return ref('white')跨頁面測試 (SPA Navigation)：
- 在首頁點擊「變紅」 → 背景變紅。
- 點擊導覽列去「關於頁」。
- 結果：關於頁的背景必須是紅色，且文字顯示「目前的主題顏色是：red」。
重新整理測試 (Browser Refresh)：
- 按 F5 重新整理。
- 結果：變回白色。
💡 架構師筆記 (Key 的重要性)
注意看 useState('color', ...) 裡面的那個 'color' 字串。
這是唯一識別碼 (Unique Key)。Nuxt 就是靠這個 Key 在 Server 和 Client 之間傳遞資料，以及在不同頁面間找到同一個變數。