如何编写全球商店插件？

Question

我正在尝试通过插件全球可用的反应性$ store对象，但无法使其正常工作。

store.ts：

import {reactive} from "vue";

export default {
    install: (app:any, options:any) => {

        app.config.globalProperties.$store = reactive({})
    }
}

main.ts：

import {createApp} from 'vue';
import app from "@/vue/app.vue";
import store from "@/scripts/store";

createApp(app)
    .use(store)
    .mount("#app");

现在我希望该插件在所有组件中可用，但是$ store保持未宣布的变量，当我尝试在组件内的＆lt; scipt设置中使用它时。

Answer 1

虽然集中国家而不是将其分布在组件之间并不是一个坏主意，但具有全球参考的高度不佳。

取而代之的是，全局参考，创建事件总线或一长串发射链，此框架中的经典选项是通量模式。目前，VUE中最简单的通量实现和正式建议的是 pinia 。它以非常简单的方式完全满足您的要求。它具有非常好的打字稿支持，您只需要进口所需的商店，它们将在整个应用程序中反应地维护状态。