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

Question

我正在尝试仅使用 Vue 3 Composition API 创建一个全局商店。

到现在为止我一直在做实验，我读了很多如何使用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文件中设置时，错误就开始了。

您是否尝试过使用 Composition APIprovide和来创建全局存储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

应用程序接口

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

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

演示

组合API

使用 Composition API，您可以像这样使用提供：

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

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

然后在一些后代组件中，你会注入它：

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

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

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

进口

或者，在需要的地方导入 store 并直接使用它可能更简单：

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

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