Vue3中如何在Pinia Store值变化时重新渲染组件

云原生阿岚

2026-7-26

解决Pinia Store变量实时更新组件的问题

你的代码存在两个核心问题导致组件无法实时更新：

模板中使用的num1变量并未在setup中返回，返回的是reload函数，变量名不匹配
reload函数仅在初始化时获取一次store.getNumber1的值，并非响应式引用，无法追踪store的变化

以下是三种可靠的修复方案：

方案一：直接返回Store实例

Pinia的Store实例本身是响应式的，直接在模板中访问其属性即可实现实时更新：

<template>
  <div>
    <p>{{ store.getNumber1 }}</p>
  </div>
</template>

<script>
import { useCalcStore } from '@/store/store'

export default {
  name: 'screenCalculator',

  setup(){
    const store = useCalcStore();
    return { store }
  }
}
</script>

方案二：使用`storeToRefs`解构响应式属性

如果需要单独解构Store中的属性，必须使用Pinia提供的storeToRefs工具，否则会丢失响应式：

<template>
  <div>
    <p>{{ getNumber1 }}</p>
  </div>
</template>

<script>
import { useCalcStore } from '@/store/store'
import { storeToRefs } from 'pinia'

export default {
  name: 'screenCalculator',

  setup(){
    const store = useCalcStore();
    const { getNumber1 } = storeToRefs(store);
    return { getNumber1 }
  }
}
</script>

方案三：使用Vue的`computed`包裹

通过计算属性包裹Store的属性，同样可以确保响应式更新（适用于需要额外处理逻辑的场景）：

<template>
  <div>
    <p>{{ num1 }}</p>
  </div>
</template>

<script>
import { useCalcStore } from '@/store/store'
import { computed } from 'vue'

export default {
  name: 'screenCalculator',

  setup(){
    const store = useCalcStore();
    const num1 = computed(() => store.getNumber1);
    return { num1 }
  }
}
</script>