Vue组件接收Pinia Store数据作为Prop后无法更新，如何解决？

安全阿岳

2026-8-17

问题解决方法

一、为什么`newTitle`不同步更新？

你在setup里把props.title赋值给ref的newTitle，这只是一次性初始化，当父组件的store.text变化导致props.title更新时，newTitle不会自动跟着变——因为ref不会主动监听props的变化。

解决办法：

1. 使用`computed`替代`ref`

computed会自动追踪依赖，当props.title变化时，newTitle会实时更新：

import { computed } from 'vue';

setup(props) {
  const newTitle = computed(() => props.title);
  // ...其他逻辑
}

之后模板里直接用{{ newTitle }}即可，无需手动维护同步。

2. 手动监听`props`变化

如果必须用ref（比如需要修改newTitle的值），可以用watch监听props.title的变化，手动更新：

import { ref, watch } from 'vue';

setup(props) {
  const newTitle = ref(props.title);
  
  watch(
    () => props.title,
    (newVal) => {
      newTitle.value = newVal;
    },
    { immediate: true } // 可选：初始化时执行一次
  );
  // ...其他逻辑
}

二、为什么直接用`store.text`也无效？

这大概率是Pinia的响应式没有正确生效，检查以下几点：

确保组件正确引入store
组件里必须通过Pinia的useStore函数获取实例，而不是直接导入一个静态对象：

import { useYourStore } from '@/stores/yourStore';

setup() {
  const store = useYourStore();
  // 模板里用{{ store.text }}
}

检查修改store的方式
修改Pinia state时，要保证是响应式修改：
- 直接赋值（推荐，简单场景）：
```
store.text = "New Completed Text";
```
- 用$patch（适合批量修改）：
```
store.$patch({
  text: "New Completed Text"
});
```

确认Pinia已正确安装
在main.js（或main.ts）里必须安装Pinia插件：

import { createPinia } from 'pinia';
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.use(createPinia());
app.mount('#app');