在 Next 13.0 使用 zustand 狀態管理工具

Next
, , ,

建立專案

建立專案。

1
2
npx create-next-app@latest
cd zustand-next-example

安裝依賴套件。

1
npm install zustand

新增 hooks/useCount.js 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
import { create } from 'zustand';

const initialState = {
  count: 0,
};

const useCount = create((set) => ({
  ...initialState,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useCount;

修改 app/page.js 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
'use client';

import useCount from '@/hooks/useCount';

export default function Home() {
  const { count, increment, decrement } = useCount();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

啟動網頁。

1
npm run dev

前往 http://localhost:3000 瀏覽。

程式碼

參考文件