Svelte自定义Store适配CapacitorJS异步Preferences插件问题求助

问题核心是你的Store初始化时直接使用默认值，而异步获取存储值的逻辑既没正确更新Store状态，也没自动执行。以下是修复后的完整代码：

修改后的 useStorage.js #

import { writable } from 'svelte/store';
import { Preferences } from '@capacitor/preferences';

const getItem = async (key) => {
    const { value } = await Preferences.get({ key });
    return value;
};

const setItem = async (key, value) => {
    await Preferences.set({ key, value });
};

export function localStore(key, defaultValue) {
    const serialize = JSON.stringify;
    const deserialize = JSON.parse;

    // 初始化时先用默认值，保证页面有初始状态
    const { subscribe, update, set } = writable(defaultValue);

    // 订阅Store变化，自动同步到Preferences
    subscribe((value) => {
        setItem(key, serialize(value));
    });

    // 初始化函数：从Preferences加载存储值并更新Store
    async function init() {
        try {
            const storedValue = await getItem(key);
            if (storedValue !== null) {
                // 解析存储值，失败则回退到默认值
                const parsedValue = deserialize(storedValue);
                set(parsedValue);
            }
            // 若存储值为null（无记录），保持默认值
        } catch (err) {
            console.error(`加载键 "${key}" 的存储值失败:`, err);
            set(defaultValue);
        }
    }

    // 自动执行初始化，无需手动调用
    init();

    return {
        subscribe,
        set,
        update, // 补充标准Store的update方法
        init // 可选暴露，允许手动触发初始化
    };
}

使用方式（stores.js 无需修改） #

export const name = localStore('name', 'your name');

关键修复点 #

1. 自动初始化：创建Store后立即执行init函数，异步获取存储值并通过set更新Store状态，页面会自动响应数据变化。
2. 错误处理：增加JSON解析失败的捕获逻辑，避免因无效存储数据导致崩溃，同时回退到默认值。
3. 完整Store方法：返回update方法，与Svelte标准Store接口保持一致，方便使用update修改值。

优化：避免初始值闪烁 #

如果不想先显示默认值再切换为存储值，可以在组件中等待初始化完成后再渲染：

<script>
    import { name } from './stores.js';
    const initPromise = name.init();
</script>

{#await initPromise}
    <div>加载中...</div>
{:then}
    <input type="text" bind:value={$name} placeholder="输入名字" />
{/await}

内容的提问来源于stack exchange，提问作者EA Dee