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

建立專案

建立專案。

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/ 瀏覽。

程式碼

參考文件