• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

125
Views
No se encontraron los "ajustes" de inyección. Problema de suministro e inyección de la API de composición de Vue

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>
almost 3 years ago · Santiago Trujillo
1 answers
Answer question

0

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>

almost 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error