Zustand窗口尺寸状态初始化问题求助：首次调用返回undefined

核心问题点 #

• 变量名不匹配：你初始化Store时设置的是windowWidth，但获取状态时用的是windowSize，首次调用自然拿不到值；resize时你设置的是windowSize，所以此时能正常获取。
• Store结构错误：Zustand的create回调必须返回初始状态对象，原代码直接调用set后只返回了清理函数，导致初始状态为空，解构操作自然失效。
• 副作用处理不规范：事件监听的清理逻辑需要和Zustand的生命周期正确绑定。

修正后的完整Store代码 #

import { create } from "zustand";

const useWindowSizeStore = create((set) => {
  // 初始化状态，统一变量名
  const initialState = {
    windowSize: window.innerWidth
  };

  const handleResize = () => {
    set({ windowSize: window.innerWidth });
  };

  // 添加窗口resize监听
  window.addEventListener("resize", handleResize);

  // 返回初始状态+清理函数（Zustand会在Store无人使用时自动执行清理）
  return {
    ...initialState,
    // 可选：暴露主动清理方法，按需使用
    cleanupResizeListener: () => window.removeEventListener("resize", handleResize)
  };
});

export default useWindowSizeStore;

正确使用方式 #

单个状态获取 #

// 首次调用即可拿到初始窗口宽度
const windowSize = useWindowSizeStore(state => state.windowSize);

解构方式使用 #

// 解构操作现在可以正常工作
const { windowSize } = useWindowSizeStore();

扩展：同时监听宽高 #

如果需要同时获取窗口宽高，只需调整状态和监听逻辑：

const useWindowSizeStore = create((set) => {
  const initialState = {
    windowWidth: window.innerWidth,
    windowHeight: window.innerHeight
  };

  const handleResize = () => {
    set({
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight
    });
  };

  window.addEventListener("resize", handleResize);

  return {
    ...initialState,
    cleanupResizeListener: () => window.removeEventListener("resize", handleResize)
  };
});

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