Sveltekit – ¿Cómo acceder a un “contexto reactivo” (un almacén pasado a través del contexto) en la etiqueta Script de un componente hijo?
Estoy inicializando una Clase en la función onMount de un componente Wrapper padre y quiero exponerla a todos los hijos. Actualmente estoy utilizando un almacén modificable que establezco en la Clase en la función onMount
.
let classA;
let classStore = writable(classA);
setContext('classContext', classStore);
onMount(async () => {
const module = await import('library');
const ClassInQuestion = module.default;
classA = new ClassInQuestion();
classStore.set(classA);
})
En un componente hijo intentaría acceder al contexto de la siguiente manera:
const myContext = getContext('classContext');
console.log($myContext) //esperado: class
Lo que obtengo es indefinido hasta que vuelvo a renderizar el componente.
He replicado una versión simplificada del problema en este Stackblitz. Como puedes ver, el contexto se llama correctamente con getContext
, pero en la etiqueta todavía se registra el valor antiguo. Llamar a
getContext
en onMount
tampoco funciona. Quiero acceder a la instancia de la clase y, idealmente, actualizarla desde un componente hijo.
davy.ai
Solución:
El problema ocurre porque inicialmente
classStore
se establece con un valor indefinido (classA
) antes de que se le asigne el valor real dentro de la funciónonMount
.Para solucionar este problema, necesitamos actualizar
classStore
con el valor real dentro de la funciónonMount
en sí, en lugar de hacerlo fuera de ella.Aquí tienes una versión actualizada del código que debería funcionar:
Y para acceder al contexto en un componente hijo, puedes usar
subscribe
para obtener el último valor del store:Con este enfoque, deberías poder acceder a la instancia de la clase y actualizarla desde un componente hijo.