stan_dard
solid-primitives/storage help for a persistent user config store not loading properly on refresh/
I have user config in a store that I want to persist. I added makePersisted from solid-primitives/storage 4.3.1. I do a check for if it is the first time the user has visited to give initial config. I load the components based on each config item in the store array. When I refresh the page, the UI does not reflect values from localStorage; it loads the same as first initialized. When I make a config change, one div "catches up" (the For with Show), but the other one doesn't load the correct value until I re-toggled them myself. I've tried a resource from init tied to Suspense or even Show. Any help appreciated.
import { makePersisted } from "@solid-primitives/storage";
export default function Home() {
const [config, setConfig init] = makePersisted(createStore<UserConfig[]>([]), { name: "default" });
if (config.length === 0) {
//do initial config setup
}
return (
<main>
...
<div>
<For each={config}>
{(conf) => (
<Show when=conf.exists}
<button onClick={() => setConfig(conf.findIndex(c => c.abbr === conf.abbr), "active", !conf.active)}>
<ConfComponent abbr={conf.abbr} />
</button>
</Show>
)}
</For>
<div>
<For each={config}>
{(conf) => (
<button onClick={() => setConfig(conf.findIndex(c => c.abbr === conf.abbr), "exists", !conf.exists)}>
<ConfCompon abbr={conf.abbr} />
</button>
)}
</For>
</div>
...
</main>
11 replies