En primer lugar, no es una buena idea mezclar un estado mutable con valores fijos como este. No hay razón para que las opciones existan en un almacén writable si no pueden cambiar.

En cuanto a cómo hacer que esto sea más conveniente: puede almacenar todos los valores en un solo objeto y serializarlo como JSON.

El ejemplo más básico:

 import { browser } from '$app/env'; import { readable, writable } from 'svelte/store'; function localStorageStore(key, initial) { if (browser == false) return readable(initial); const value = localStorage.getItem(key) const store = writable(value == null ? initial : JSON.parse(value)); store.subscribe(v => localStorage.setItem(key, JSON.stringify(v))); return store; } const options = { speed: ['slow', 'medium', 'fast'], sound: ['on', 'off'], tiles: [4, 6, 8], theme: ['light', 'dark'], } const settings = localStorageStore('so.lss', { speed: 'slow', sound: 'on', tiles: 4, theme: 'light', });

Dado que el acceso a localStorage está encapsulado en una función de todos modos, también podría crear fácilmente una tienda para cada opción individualmente.

Si desea una forma genérica de usar opciones y configuraciones juntas, puede iterar a través de Object.entries , por ejemplo

 {#each Object.entries(options) as [key, items]} <select bind:value={$settings[key]}> {#each items as item} <option value={item}>{item}</option> {/each} </select> {/each}

Nota: La implementación de la tienda es solo para fines ilustrativos. Probablemente desee un mecanismo más complejo que maneje:

• Tipos no primitivos, por ejemplo, esto fallará para los objetos de Date , ya que no se analizarán de nuevo a una Date .
• Versionado y migración de valores. Tan pronto como desee cambiar el formato de una configuración, tendrá que lidiar con los valores obsoletos que existen en las máquinas de los usuarios.
• El evento de storage , si la tienda debe sincronizarse en varias pestañas.

Si debe mantener ese formato de objeto, también puede volver a asignarlo a sus componentes:

 const configuration = { speed: { options: ['slow', 'medium', 'fast'], selected: 'slow' }, sound: { options: ['on', 'off'], selected: 'on' }, tiles: { options: [4, 6, 8], selected: 4 }, theme: { options: ['light', 'dark'], selected: 'light' }, }; const options = Object.fromEntries( Object.entries(configuration) .map(([key, value]) => [key, value.options]) ); const settings = localStorageStore( 'so.lss', Object.fromEntries( Object.entries(configuration) .map(([key, value]) => [key, value.selected]) ) );

Las options / settings serán equivalentes al primer ejemplo.