Astro 進階課程 2. 狀態管理與跨組件通訊 —— Nano Stores

專題二：Nano Stores —— 連結孤島的橋樑

為什麼需要它？

在 Astro 中，每個互動組件（React, Vue, Svelte）都是一個獨立的「孤島 (Island)」。

• 問題：如果你在 Header.tsx (React) 有一個購物車圖示，在 ProductCard.tsx (React) 有一個「加入購物車」按鈕，這兩個組件是分開渲染的，沒辦法直接傳遞數據。

1. 手把手實作：安裝與設定

首先，安裝 Nano Stores：

npm install nanostores @nanostores/react

2. 建立 Store

在 src/ 下建立一個資料夾 store/，並建立 cartStore.ts：

import { atom } from 'nanostores'

// 定義一個簡單的狀態：購物車內的物品數量
export const $cartCount = atom(0)

// 定義一個增加數量的方法
export function addToCart() {
  $cartCount.set($cartCount.get() + 1)
}

小撇步：在 Nano Stores 中，習慣在變數名前面加上 $（如 $cartCount），方便一眼看出它是個 Store。

3. 在 React 組件中使用

建立 src/components/AddToCartButton.tsx (按鈕)：

import { addToCart } from '../store/cartStore'

export default function AddToCartButton() {
  return (
    <button
      onClick={() => addToCart()}
      className="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700"
    >
      加入購物車
    </button>
  )
}

建立 src/components/CartCounter.tsx (顯示數量)：

import { useStore } from '@nanostores/react'
import { $cartCount } from '../store/cartStore'

export default function CartCounter() {
  const count = useStore($cartCount)

  return (
    <div className="relative p-2">
      <span className="bg-red-500 text-white text-xs rounded-full px-2 py-1">
        {count}
      </span>
    </div>
  )
}

4. 在 Astro 頁面中組合

在你的 index.astro 或 Layout.astro 中放置這兩個組件：

---
import CartCounter from '../components/CartCounter';
import AddToCartButton from '../components/AddToCartButton';
---

<nav class="flex justify-between p-4 bg-slate-100">
  <h1 class="font-bold">我的商店</h1>
  <CartCounter client:load />
</nav>

<main class="p-10">
  <AddToCartButton client:load />
</main>

📝 專題二練習題

任務目標：實作一個「深色模式 (Dark Mode)」切換器。

1. 建立 Store：在 src/store/themeStore.ts 中建立一個 $isDark 的 atom（預設為 false）。
2. 切換按鈕：建立一個 ThemeToggle.tsx 組件，點擊時切換 $isDark 的值。
3. 全局影響：
4. • 這比較進階：在你的 BaseLayout.astro 中，使用 useStore 監聽 $isDark。
   • 當 $isDark 為 true 時，給最外層的 標籤加上 class="dark"。
   • 運用 Tailwind 的 dark: 前綴（例如 dark:bg-slate-900）來測試效果。

下個章節會有實作筆記 👍