Sveltekit - 如何在子组件的脚本标签中访问“反应式上下文”（通过上下文传递的存储）？

Question

I'm initialising a Class in the onMount function of a Parent Wrapper component and want to expose it to all the children. I'm currently using a writable store that I set to the Class in the onMount function.

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)
})

In a child component I'd try accessing the context like so:

const myContext = getContext('classContext');
console.log($myContext) //expected: class

What I get is undefined until I re-render the component.

I replicated a simplified version of the problem in this Stackblitz . As you can see the context gets called correctly with getContext , but in the <script> tag the old value is still being logged. Calling getContext in onMount doesn't work either. I want to access the Instance of the class and ideally update it from a child component.

Answer 1

In your child component, you could make myContext reactive so it triggers on every change

const myContext = getContext('testContext');
$: if(myContext) console.log($myContext);

The output is:

At this point we dont know if the child is mounted and perhaps you dont want to trigger anything before mount . Therefore, we can add further conditions eg waiting for the childs mount or checking a condition of myContext :

let mounted = false;
const myContext = getContext('testContext');

$: if(myContext && mounted && $myContext == "after mount") contextReady();

async function contextReady() {
    console.log($myContext)
}
    
onMount(() => {
    mounted = true;
});