Zustand全局状态访问异常：我的代码哪里出错了？

你的问题核心是Zustand store实例被重复创建，导致路由切换时状态重置，而非对Zustand全局状态的理解有误。下面是具体排查和修复方法：

常见错误原因 #

十有八九是你在组件内部定义了Zustand store（比如在Home1/Home2组件里调用create），或者不小心创建了多个store实例。这种情况下，每次路由切换组件重新渲染，都会生成新的store，状态自然回到初始值。

正确实现方式 #

1. 全局单例Store创建 #

单独新建一个store文件（比如src/store.js），在全局作用域创建唯一的store实例：

// src/store.js
import { create } from 'zustand'

// 全局唯一的count store
export const useCountStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 }))
}))

2. 组件中共享使用 #

所有路由组件直接导入这个全局store，不要在组件内重复定义：

// src/Home1.jsx
import { useCountStore } from './store'

export default function Home1() {
  const count = useCountStore(state => state.count)
  const increment = useCountStore(state => state.increment)

  return (
    <div>
      <h2>Home1</h2>
      <p>当前计数：{count}</p>
      <button onClick={increment}>+1</button>
    </div>
  )
}

// src/Home2.jsx
import { useCountStore } from './store'

export default function Home2() {
  const count = useCountStore(state => state.count)
  const decrement = useCountStore(state => state.decrement)

  return (
    <div>
      <h2>Home2</h2>
      <p>当前计数：{count}</p>
      <button onClick={decrement}>-1</button>
    </div>
  )
}

排查其他可能的错误点 #

• 检查是否在组件函数内部调用create创建store（这是最常见的错误）
• 确认没有复制store代码到多个组件文件，导致多个实例存在
• 检查路由配置，确保组件没有被不必要的高阶组件重复包裹，引发store重新实例化

Zustand的全局状态依赖单例模式，只要保证store是全局唯一实例并被所有组件共享导入，路由切换时状态就会保持一致。

内容的提问来源于stack exchange，提问作者Scopique