svelte store 和 svelte context 之间的区别

Question

import { getContext } from 'svelte';

Svelte Context和 Svelte Store之间有什么区别？不同情况什么时候使用？

import {writable} from 'svelte/store';

Answer 1

上下文是在组件层次结构中继承的数据。商店通过订阅系统封装反应性。

上下文对于使数据可用于应用程序的大部分（例如本地化数据或当前用户信息）非常有用，而不必通过每个级别的 props 传递它。这允许不“了解”上下文的组件（例如第三方组件）存在于其间而不受干扰。

存储允许反应性跨越组件边界。例如，Svelte 不会捕获常规 JS/TS 文件中变量的更改。通过传递存储，组件可以订阅更改（通过$语法）并自动更新。

默认情况下，上下文也不是响应式的，因此通过上下文传递存储通常也是有意义的。

人们普遍存在一种误解，认为商店与全球化息息相关。这与商店无关；任何直接从模块导出的对象都会以这种方式运行。

您当然可以以这种方式使用商店，但它具有单例的所有优点和缺点。例如，它很容易访问，但使测试变得更加混乱并且可能无法并行，因为多个测试会尝试同时更改和读取该值。

就我个人而言，我建议将可在应用程序中的任何位置访问的存储作为组件树根部的上下文注入。