没有找到注入“设置”。Vue组合API提供和注入问题

Question

我试图使用vues提供和注入传递一个反应性对象，我得到了[Vue warn]: injection "settings" not found.警告，当我注销设置时，它返回为未定义的设置。

我在这里做错什么了？

我做了一个快速的小CodeSandbox来复制这个问题。

如果有人知道为什么会这样，请告诉我！

干杯!

Test.vue

<script>
import { defineComponent, provide, reactive } from "vue";

export default defineComponent({
  setup() {
    const settings = reactive({
      theme: "light",
      color: "#F092AD",
      id: 69,
    });
    provide("settings", settings);
    return {};
  },
});
</script>

App.vue

<template>
  <pre>{{ settings }}</pre>
</template>

<script>
import { defineComponent, inject } from "vue";

export default defineComponent({
  setup() {
    const settings = inject("settings");
    console.log(`settings → `, settings);
    return { settings };
  },
});
</script>

Answer 1

只能使用“提供函数”向组件的后代提供数据。

在您的示例中，组件不是后代，因此会收到警告，因为没有提供任何信息。

您可以使用应用程序级提供如下所示：

app.provide(/* key */ 'message', /* value */ 'hello!')

或者是一些全球性的国家管理工具，比如皮尼亚或者vuex。

请看一看码箱或代码片段：

​

const { reactive, provide, inject } = Vue
const app = Vue.createApp({
  setup() {
    const msg = inject("message");
    const settings = reactive({
      theme: "light",
      color: "#F092AD",
      id: 69,
    });
    provide("settings", settings);
    return { msg };
  },
})
app.component('child', {
  template: `<pre><test /></pre>`,
})
app.component('test', {
  template: `<pre>{{ settings }}</pre>`,
  setup() {
    const settings = inject("settings");
    return { settings };
  },
})
app.provide(/* key */ "message", /* value */ "hello!");
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <pre>{{ msg }}</pre>
  <child />
</div>

​