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.
You can use Context api just like React Context to define your state outside of your components.
https://qwik.builder.io/docs/components/context/