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

Question

我正在尝试仅使用 Vue 3 组合创建一个全局商店 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，我将能够访问商店内的所有数据。但就我而言，它不起作用。当我在 main.ts 文件中设置 provide 时，我感觉错误开始了。

您是否尝试过使用具有 provide 和 inject 的组合 API 创建全球商店？

顺便说一句，我的组件文件 (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

尝试在根组件 App 中提供 store，然后在任何子组件中使用它：

export default {
   name:"App",
  provide: { store },

...

你好组件：

<template>
  <div>
    <ul>
      <li v-for="(item, i) in fnacResults" :key="i">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  inject: ["store"],
  computed: {
    fnacResults() {
      return this.store.state.fnacResults;
    },
  },
  mounted() {
    console.log(this.store.state);
  },
};
</script>

<style>
</style>

LIVE DEMO

Answer 2

申请API

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

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

demo

作文API

使用组合 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
    }
  }
}

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

Create a Global Store using Vue 3 Composition API

typescript

vue.js

vuex

vuejs3

vue-composition-api

申请API

作文API

导入