Zustand 里怎么监听某个状态变化并执行副作用？

程序猿景景提问于 2026-03-06 05:32:19 阅读 3

框架

我用 Zustand 管理了一个 isLogin 状态，想在它变成 true 的时候自动跳转首页，但不知道怎么监听这个变化。试过在组件里 useEffect 监听，但感觉不太对，应该在 store 里处理吧？

现在 store 是这样写的：

import { create } from 'zustand'

const useStore = create((set) => ({
  isLogin: false,
  login: () => set({ isLogin: true }),
}))

有没有办法在 set 之后自动触发某个函数？比如类似 Vue 的 watch 那样？

我来解答赞 7 收藏

反馈

1 条解答

司徒柯佳 Lv1

这事我也折腾过，zustand确实不像vuex那样内置watch功能，但有个挺简单的解决方案。

在zustand的set函数里可以传第二个参数，是个回调函数，会在状态更新后执行。你可以在login方法里这样改：

const useStore = create((set) => ({

  isLogin: false,

  login: () => set({ isLogin: true }, () => {

    // 这里写跳转逻辑

    window.location.href = '/home'

  }),

}))

不过说实话，我当时也卡在这，后来发现更好的做法是在组件里用subscribe。因为跳转这种副作用通常属于视图层逻辑，放在store里不太干净：

const unsubscribe = useStore.subscribe(

  (state) => state.isLogin,

  (isLogin) => {

    if (isLogin) {

      // 跳转逻辑

    }

  }

)

// 记得在组件卸载时取消订阅

两种方式都能用，看你的具体场景。如果是简单项目用第一种就行，复杂点的话建议第二种更规范。

2026-03-06 06:00