如何编写一个全局商店插件？

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

标签中使用它时，

undeclared variable

仍然是

<script setup>

。

Answer 1

虽然集中状态而不是将其分布在组件之间并不是一个坏主意，但非常不建议拥有全局引用。

这个框架中的经典选项是 Flux 模式，而不是全局引用、创建事件总线或长链发出。目前 Vue 中最简单的 Flux 实现，官方推荐的是Pinia。它以非常简单的方式完全满足您的要求。它具有非常好的打字稿支持，您只需在需要的地方导入所需的商店，它们就会在整个应用程序中反应性地维护状态。