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

【问题标题】：Create a Global Store using Vue 3 Composition API使用 Vue 3 Composition API 创建全局商店
【发布时间】：2021-02-09 04:44:16
【问题描述】：

我正在尝试仅使用 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，我将能够访问存储内的所有数据。但就我而言，它不起作用。当我在我的main.ts 文件中设置provide 时，我感觉错误开始了。

您是否尝试通过 provide 和 inject 使用 Composition 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>

【问题讨论】：

标签： typescript vue.js vuex vuejs3 vue-composition-api

【解决方案1】：

应用程序 API

createApp 的第一个参数应该是组件定义（在您的情况下为 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
    }
  }
}

【讨论】：

【解决方案2】：

尝试在根组件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

【讨论】：