Pinia中如何正确监听store状态变化？

开发者志敏提问于 2026-03-15 17:51:25 阅读 38

框架

我在用Pinia管理状态，想在组件里监听某个store里的数据变化，但用watch好像没反应。试过直接watch store的属性，也试过用store.$subscribe，但有时候更新不及时，不知道是不是写法有问题。

比如下面这段代码（虽然是React语法，但逻辑类似），我是想在状态变更时触发副作用，但在Pinia里怎么实现才对？

const [count, setCount] = useState(0);

useEffect(() => {
  console.log('count changed:', count);
}, [count]);

// 模拟外部状态更新
const handleClick = () => setCount(prev => prev + 1);

Vue3 组件开发

我来解答赞 8 收藏

反馈

1 条解答

FSD-峻珲 Lv1

直接这样用：

import { storeToRefs } from 'pinia'

import { watch } from 'vue'



const store = useCounterStore()

const { count } = storeToRefs(store)



// 用storeToRefs解构出来的才是响应式的

watch(count, (newVal) => {

  console.log('count changed:', newVal)

})

或者直接用store的$subscribe：

const store = useCounterStore()

store.$subscribe((mutation, state) => {

  console.log('count:', state.count)

})

问题在于你直接watch store的属性它不是响应式的，必须用storeToRefs或者$subscribe。$subscribe是响应式的，不会有延迟。

2026-03-16 22:11