Nano Stores與其它的狀態管理工具（如 Redux 或 Pinia）不同
Nano Stores 是 不可知框架（Framework-agnostic） 的。這意味著你可以在同一個 Astro 專案中，讓 React、Vue、Svelte 和原生 JS 共享同一個狀態。
第一階段：核心概念與環境設定
Nano Stores 的核心是 Atoms（單一值）和 Maps（物件結構）。它們是「訂閱制」的，只有在元件真正掛載到瀏覽器時才會運作。
1. 安裝
在你的 Astro 專案中執行：npm install nanostores @nanostores/react # 如果你用 React
# 或者
npm install nanostores @nanostores/vue # 如果你用 Vue
2. 建立你的第一個 Store
在 src 下建立一個 store.js：
import { atom } from 'nanostores'
// 定義一個初始值為 0 的 Atom
export const $counter = atom(0)
第二階段：在 Astro 元件中使用（群島通訊）
這是最常見的情境：你有一個按鈕（React）和一個顯示面板（Vue），它們需要同步數據。
練習 1：基礎計數器
步驟 A：建立 React 按鈕 (src/components/Button.jsx)
import { $counter } from '../store'
export default function Button() {
return <button onClick={() => $counter.set($counter.get() + 1)}>加 1</button>
}
步驟 B：建立原生 JS 顯示器 (src/components/Display.astro) 在 Astro 的 <script> 標籤中，你需要使用 .subscribe 來監聽變化：
<div id="display">0</div>
<script>
import { $counter } from '../store'
const div = document.querySelector('#display')
// 訂閱變化，當 $counter 改變時更新 DOM
$counter.subscribe((value) => {
div.textContent = value.toString()
})
</script>
第三階段：處理複雜數據（Maps）
練習 2：使用者設定檔
建立 Store：
import { map } from 'nanostores'
export const $user = map({
name: 'Guest',
role: 'Visitor',
})
// 更新函數
export function updateName(newName) {
$user.setKey('name', newName)
}
第四階段：進階技巧與非同步數據
練習 3：從 API 獲取數據
Nano Stores 可以處理非同步狀態。這在 Astro 中處理客戶端數據請求非常有用。
import { atom, onMount } from 'nanostores'
export const $data = atom([])
onMount($data, () => {
// 當有人訂閱 $data 時，這段代碼才會執行
fetch('https://api.example.com/items')
.then((res) => res.json())
.then((json) => $data.set(json))
})
🛠️ 實作
1. 完成第一階段、第二階段
2. 在 src/pages/index.astro 匯入元件 Display、Button
---
import Display from '../components/Display.astro'
import Button from '../components/Button'
---
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<h1>Astro</h1>
<Display client:load />
<Button client:load />
</body>
</html>
3. ❌ 發生錯誤
Unable to render Button.
No valid renderer was found for the .09/blog/src/components/Button file extension.
意思是： 你試圖在 Astro 頁面中使用一個框架組件（例如 React 的 .jsx 或 .tsx），但你還沒有告訴 Astro 如何處理這種檔案。
Astro 預設只懂 .astro 檔案，其他的框架（React, Vue, Svelte 等）都需要透過 Integration (整合) 手動開啟。
第一步：安裝 React 整合套件
在你的終端機執行以下指令（這會自動幫你安裝套件並修改設定檔）：
npx astro add react(當它詢問是否要繼續、更新設定檔、安裝依賴時，請一路按 y 或 Enter)
第二步：檢查設定檔 (astro.config.mjs)
執行完上述指令後，你的 astro.config.mjs 應該會自動變成這樣：
import { defineConfig } from 'astro/config'
import react from '@astrojs/react' // 1. 引入
export default defineConfig({
integrations: [react()], // 2. 啟用
})
第三步：檢查組件引用方式
在 Astro 檔案中引用 React 組件時，請確保你有加上 Client Directive（客戶端指令），否則 React 的互動功能（如點擊事件）會失效：
---
import { Button } from './Button.tsx';
---
<Button client:load />
🤔 為什麼會這樣？
Astro 的核心概念是 "Island Architecture" (孤島架構)。 預設情況下，為了效能，Astro 會把所有組件都渲染成純 HTML（不含任何 JavaScript）。如果你沒安裝 React 整合包，它看到 .jsx 或 .tsx 檔案會完全不知道該如何解譯，所以才會噴出這個錯誤。
4. ✅ 成功顯示 <Display> 、 <Button>
Button 可點擊，Display 計數累加
扎實練習題
接下來的 3 個章節會陸續介紹以下三個挑戰：
- 「購物車」挑戰： 建立一個
map存儲購物車商品。建立一個 Astro 頁面，左邊是產品列表（點擊加入），右邊是購物車清單（即時更新數量）。 - 「深色模式」切換： 建立一個
$isDark的 atom，並同步到瀏覽器的localStorage。當切換開關時，整個網站的<html>標籤要自動加上或移除 .dark 類名。 - 「跨框架同步」： 如果你會兩種框架（如 React 和 Vue），嘗試寫一個 React 表單輸入文字，讓一個 Vue 元件即時顯示該文字。
