如何写一个全局存储插件?

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模式。目前Flux在Vue中最简单的实现，也是官方推荐的是Pinia。它以一种非常简单的方式完全满足了您的要求。它有很好的typescript支持，你只需要在你需要的地方导入你需要的store，它们会在整个应用程序中反应性地维护状态。