Zustand 状态在 Vue 组件里为啥没响应式更新？

♫洛熙提问于 2026-03-31 11:20:14 阅读 3

框架

我用 Zustand 写了个 store，在 Vue 3 项目里引入后，页面初始能显示状态，但点击按钮修改状态后视图没更新。是不是 Vue 和 Zustand 不兼容？还是我哪里写错了？

这是我的组件代码：

<template>
  <div>{{ count }}</div>
  <button @click="increment">+1</button>
</template>

<script setup>
import { useStore } from './store'
const { count, increment } = useStore()
</script>

我来解答赞 2 收藏

反馈

1 条解答

设计师玉研 Lv1

Zustand 和 Vue 其实是能配合使用的，但你需要一点小技巧来让状态变得响应式。问题出在你直接从 Zustand store 获取值的方式上。

可以优化成这样：用 Vue 的 computed 包裹一下状态值。这样当 Zustand 的状态变化时，Vue 能感知到并更新视图。

<script setup>

import { useStore } from './store'

import { computed } from 'vue'



const store = useStore()



// 把 count 包装成 computed

const count = computed(() => store.count)



function increment() {

  store.increment()

}

</script>

这个方案的核心就是用 computed 来创建一个 Vue 可追踪的响应式引用。说白了就是给 Zustand 状态加了个中间层，让它能和 Vue 的响应系统好好说话。

说实话这有点像给两个不同系统的组件搭桥，但确实能解决问题。记得每次从 store 拿数据时都这么做，虽然麻烦点，但也算是一种优雅的妥协吧。

2026-03-31 11:21