почему контекст не определен в стройном

Я работаю над компонентом, и мне нужно использовать для него контекст. Но я не знаю, почему, когда я использую getContext, он не определен.

Это часть моих кодов первого компонента (компонент индекса):

import { setContext } from 'svelte';
import {onMount} from "svelte";

let tempSuggest;

const suggestModel = {
   category_id: 1,
   title: "",
   images: [{}],
   catalogues: [{}],
   dependent_attributes: [{}],
   independent_attributes: [{}],
};

$: tempSuggest = Object.assign({}, suggestModel);

onMount(() => {
   setContext(clientProductSuggest, tempSuggest);
});

В html-кодах первого компонента (загрузка подкомпонентов в конце индексного файла):

<svelte:component this={component} {...props}/>

Во втором компоненте:

import { getContext } from 'svelte';
const c = getContext('clientProductSuggest');

console.log(c);

А теперь контекст не определен.


javascript context-api svelte svelte-3
person Rmanx77    schedule 03.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это связано с тем, что контексты в Svelte не являются реактивными по умолчанию, когда вы назначаете tempSuggests контексту, он фактически undefined

Чтобы получить реактивность в вашем контексте, вы должны создать tempSuggests как хранилище:

import { setContext } from 'svelte';
import { writable } from "svelte/store";

let tempSuggest = writable({});

const suggestModel = {
   category_id: 1,
   title: "",
   images: [{}],
   catalogues: [{}],
   dependent_attributes: [{}],
   independent_attributes: [{}],
};

$: tempSuggest.update(value => Object.assign(value, suggestModel));
setContext('clientProductSuggest', tempSuggest);

Также учтите следующее:

  • setContext не нужно вызывать внутри onMount
  • первым аргументом setContext должна быть строка (я добавил "")
  • suggestModel теперь магазин, и дети должны относиться к нему как к такому
person Stephane Vanraes    schedule 03.08.2020
comment
Я использовал ваш код, но почему, когда я регистрирую контекст в консоли после setContext, метод In get не показывает мне предложениеModel? - person Rmanx77; 03.08.2020
comment
Я хочу, чтобы моя временная переменная была пустой и выглядела как SuggModel, когда страницы загружаются или когда пользователь нажимает кнопку отмены, необходимо обновить контекст. - person Rmanx77; 03.08.2020
comment
Когда вы говорите, что log, контекст после setContext находится в дочернем элементе, сразу после выполнения getContext? Потому что на тот момент вы еще не обновили tempSuggest - person Stephane Vanraes; 04.08.2020