问题:我需要在两个独立的组件之间传输信息。在主组件和另一个组件之间。我尝试创建Vue文档中描述的React式状态管理,但对象的值始终是起始值,并且不反映其他组件所做的更改。
我尝试过的:* * 商店. ts**
const valueOriginal = ref("defaultValue");
export const store = reactive({ value: valueOriginal });
- 组件A.值**:
import { store } from "./store";
...
...
console.log("mounted with store object value: ", this.store.value);
this.store.value = "Modified by componentA.vue";
console.log("Modified store object value: ", this.store.value);
componentA
更改存储值后导航到componentB
...
- 组件B值**:
import { store } from "./store";
...
...
console.log("mounted with store object value: ", this.store.value); // this is the default value still
1条答案
按热度按时间iyr7buue1#
我做了一个StackBlitz来展示一个工作示例。我不太确定你的完整代码看起来如何。你的错误可能是使用了
this
,但我不确定你是否使用了Composition API。你对商店本身的定义看起来很好。我建议使用Pinia作为存储管理,它是由Vue核心团队维护的。像你现在这样使用存储可能会导致安全漏洞,当与SSR结合使用时(更多信息)。