为什么 context 在 svelte 中未定义

Question

我正在开发一个组件，我需要为其使用上下文。但是我不知道为什么当我使用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);

现在上下文未定义。

Answer 1

这是因为 Svelte 中的 contexts 默认情况下不是反应式的，当您将 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 现在是一家商店，在 children

Answer 2

可能不会涵盖这个问题，但请记住，getContext 仅适用于“setContenxt 组件”的子项。对于跨组件共享，我们应该使用商店。

我正在写这个答案，因为如果我在这里找到它，它会节省我几个小时的搜索和写消息到 svelte 社区聊天的时间。

为什么 context 在 svelte 中未定义

why context is undefined in svelte

javascript

svelte

svelte-3