自定义状态管理不工作Vue 3- TS

au9on6nz  于 2022-12-23  发布在  Vue.js
关注(0)|答案(1)|浏览(107)

问题:我需要在两个独立的组件之间传输信息。在主组件和另一个组件之间。我尝试创建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
iyr7buue

iyr7buue1#

我做了一个StackBlitz来展示一个工作示例。我不太确定你的完整代码看起来如何。你的错误可能是使用了this,但我不确定你是否使用了Composition API。你对商店本身的定义看起来很好。
我建议使用Pinia作为存储管理,它是由Vue核心团队维护的。像你现在这样使用存储可能会导致安全漏洞,当与SSR结合使用时(更多信息)。

相关问题