typescript - 使用 Vue 3 Composition API 创建全局商店

Question

我正在尝试仅使用 Vue 3 Composition API 创建一个全局商店。
直到现在我一直在做实验，并且我阅读了很多如何使用 Composition API，但是我知道我不知道如何使用 provide和 inject .
我所知道的是provide将拥有将传递给子组件的所有数据，所以我认为我应该将商店导入 main.ts .代码如下所示:
这是商店(src/store/index.ts):

import { reactive, readonly } from "vue";

const state = reactive({
  fnacResults: [],
  interResults: [],
});

export default { state: readonly(state) };

这是 main.ts :

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store/index";

createApp({ provide: { store }, }, App)
  .use(router)
  .mount("#app");

而当父组件有数据时，如果我使用 inject ，我将能够访问商店内的所有数据。但就我而言，它不起作用。当我设置 provide 时，我感觉错误开始了在我的 main.ts文件。
您是否尝试过使用带有 provide 的 Composition API 创建全局商店？和 inject ?
顺便说一句，我的组件文件( src/views/Home.vue )看起来像这样:

<template>
  <div>{{ store.state.fnacResults }}</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  inject: ['store']
});
</script>

Answer 1

应用程序 APIcreateApp的第一个参数应该是组件定义(在您的情况下为 App)。相反，您可以使用应用程序实例的 provide() :

createApp(App).provide('store', store).mount('#app')

demo
组合 API
使用 Composition API，您可以 use provide像这样:

// Parent.vue
import { provide } from 'vue'
import store from '@/store'

export default {
  setup() {
    provide('store', store)
    //...
  }
}

然后在一些后代组件中，您将 inject它与:

// Child.vue
import { inject } from 'vue'

export default {
  setup() {
    const store = inject('store')

    return {
      results: store.state.interResults
    }
  }
}

进口
或者，将商店导入您需要的地方并直接使用它可能更简单:

// Child.vue
import store from '@/store'

export default {
  setup() {
    return {
      results: store.state.interResults
    }
  }
}