Is there any way to define state, non-bound to the componenttree - like svelte/store

Question

I recently took a look into Qwik and liked most of what I saw. Sadly, I didn't find any way to define state outside of a component. I also couldn't find any state management library that can work with Qwik (my only hope was nanostores).

So, am I not seeing something or is there no way to create state outside of components in Qwik?

In Svelte I would do such like this:

store.ts

import { writable } from "svelte/store";
export const count = writable(0);

App.svelte

<script lang="ts">
  import CountIndicator from './components/CountIndicator.svelte';
  import Counter from "./components/Counter.svelte";
</script>

<main>
  <Counter />
  <CountIndicator/>
</main>

Counter.svelte

<script>
  import { count } from "../store";
</script>

<div class="counter">
  <button on:click={() => $count--}>-</button>
  <span>{$count}</span>
  <button on:click={() => $count++}>+</button>
</div>

I looked both in to the Qwik and Qwik City documentation. I also checked nanostores as they have support for even solid.js.

Answer 1

You can use Context api just like React Context to define your state outside of your components.

https://qwik.builder.io/docs/components/context/

Answer 2

Having a state non-bound to any component is currently not supported in Qwik:

[...] in Qwik the state must be part of the tree, for technical reason but globals are in general something to avoid even in other templates when doing SSR.

Sources:

• https://github.com/BuilderIO/qwik/issues/645#issuecomment-1284273839
• https://hackmd.io/@qwik/data-principles#State-is-part-of-the-tree