-3

I'm going to create a new Svelte 5 app where I will have some global state (settings, configuration values, etc.) I need to be reactive and accessible in most components. I'm thinking about two different solutions:

Solution 1

In the main component, use setContext('settings', $state({setting1: false, setting2: 45})), and then obtain it in the other components using const settings = getContext('settings').

Solution 2

Put export const settings = $state({setting1: false, setting2: 45}) in a .svelte.js file, and then import it in the components where I need it.

I guess I would have to use Solution 1 if I would run multiple instances of my app on the same website and I would want them to have different global states, but in my case I will just run one instance of my app, so I think I can just as well use Solution 2, which I guess will be much easier to use (for one, I will get type hinting for free).

Am I thinking right about this? Or is there a better way to implement global reactive state in Svelte 5?

Improve this question
Related questions
0
How do I share date context with multiple components in Svelte
0
Svelte 5 reactive $state in external module (dragListener)
0
How can I add a global SCSS file to Svelte / SvelteKit?
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.