主页 / coding / 问题 / 78823461
Accepted
Patrick Kenny
Asked: 2024-08-02 08:59:33 +0800 CST

访问全局存储中的设备本地存储值

  • 772

我的应用将用户偏好存储在本地存储中，我正尝试将这些值作为上下文提供给我的应用。我陷入困境，因为我不明白如何在 SvelteKit 中从应用最高级别的异步函数设置上下文。

我创建了一个默认为具有默认值的对象的存储（本地存储尚未加载）：

export const localStoragePreferences = writable(new LocalStoragePreferences());

queryLocalStoragePreferences现在，我有一个返回本地存储的真实值的异步函数。

我尝试在根目录中设置它layout.ts：

export async function load() {
    const localStoragePreferences = await queryLocalStoragePreferences();
    setContext('localStoragePreferences', localStoragePreferences);
}

由于错误，此操作失败Function called outside component initialization。

根据对类似问题的回答，我应该在高级组件中声明 setContext，然后在低级组件中使用我的异步值更新上下文。在 SvelteKit 中哪里可以执行此操作？

sveltekit

2 个回答

  1. Best Answer

    SvelteKit 中最高级别的组件位于+layout.svelte路线目录中，每个页面都以其作为祖先。

    • 1

  2. 根据@brunnerh 的回答，我做了以下事情。

    routes目录+layout.svelte

    import { setContext } from 'svelte';
/** @type {import('./$types').LayoutData} */
export let data;
setContext('localStoragePreferences', data.localStoragePreferences);

    routes目录+layout.ts

    import queryLocalStoragePreferences from '$lib/queries/queryLocalStoragePreferences';

/** @type {import('./$types').LayoutServerLoad} */
export async function load() {
    const newPreferences = await queryLocalStoragePreferences();
    return {
        localStoragePreferences: newPreferences
    };
}

    商店.ts

    export const localStoragePreferences = writable(new LocalStoragePreferences());

    现在我拥有一家按我预期运作的全球商店！

    • 0

相关问题