Estoy tratando de pasar un objeto reactivo usando vues provide and inject y obtengo el [Vue warn]: injection "settings" not found. advertencia y cuando salgo de la configuración vuelve como indefinido.
¿Qué estoy haciendo mal aquí?
Hice un pequeño CodeSandbox rápido para replicar el problema.
Si alguien tiene alguna idea de por qué sucede esto, ¡hágamelo saber!
¡Salud!
prueba.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>
aplicación.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>
Solo puede usar la función de proporcionar para proporcionar datos a los descendientes de un componente.
En su caso, el componente no es descendiente, por lo que recibe una advertencia porque no se proporciona nada.
Puede proporcionar el nivel de aplicación de uso de éter como:
app.provide(/* key */ 'message', /* value */ 'hello!')
o alguna herramienta de gestión de estado global como pinia o vuex.
Eche un vuezo a codesandbox o fragmento:
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>