react 中的Zustand的store使用

一只小阿乐2026-04-08 8:23

这个react 中的store 就跟vue中的pinia 是差不多的使用方法

create<ThemeState>：创建一个 Zustand store，并用 TypeScript 接口约束 store 的形状。
(set) => ({ ... }) ：回调函数，set 用于更新状态。
返回值 ：对象包含状态（theme）和修改状态的方法 （setTheme、toggleTheme）。
- setTheme：直接设置新主题。set({ theme }) 会合并新状态。
- toggleTheme：基于当前状态切换。set((state) => ({ theme: ... })) 使用函数式更新。
  
  import { create } from 'zustand';
  
  type Theme = 'light' | 'dark';
  
  interface ThemeState {
  theme: Theme;
  setTheme: (theme: Theme) => void;
  toggleTheme: () => void;
  }
  
  export const useThemeStore = create((set) => ({
  theme: 'light',
  setTheme: (theme) => set({ theme }),
  toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
  }));

store 文件放在 src/store/useThemeStore.ts

组件中使用：

复制代码

// src/pages/Home.tsx
import { useThemeStore } from '../store/useThemeStore';

function Home() {
  // 解构出 state 和 actions
  const { theme, setTheme, toggleTheme } = useThemeStore();

  return (
    <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
      <p>Current theme: {theme}</p>
      <button onClick={() => setTheme('light')}>Light</button>
      <button onClick={() => setTheme('dark')}>Dark</button>
      <button onClick={toggleTheme}>Toggle</button>
    </div>
  );
}

export default Home;

也可以这样写优化

复制代码

function ShowTheme() {
  const theme = useThemeStore((state) => state.theme);
  return <div>Theme: {theme}</div>;
}

function ThemeControls() {
  const setTheme = useThemeStore((state) => state.setTheme);
  const toggleTheme = useThemeStore((state) => state.toggleTheme);
  return (
    <>
      <button onClick={() => setTheme('light')}>Light</button>
      <button onClick={toggleTheme}>Toggle</button>
    </>
  );
}

因为 Zustand 的 store 是在 React 外部创建的全局单例，通过 create 返回的 hook 会订阅这个单例的变化，所以不需要 Context。

这个就跟vue 的一模一样的当然这个是不分模块的写法

我们如果项目庞大需要分模块就需要跟vue开发一样了需要分模块