前面提到的svelte stores是一种用于管理应用程序状态的机制，它可以在不同组件之间共享状态，但就可能会有这样子的疑问，难道一定要通过stores来传递属性的状态吗

---

Props（属性）

最简单的方法是通过将状态作为属性传递给子组件来共享状态。父组件可以将状态作为 prop 传递给子组件，子组件可以读取和修改这些 prop。这种方法适用于简单的状态共享场景。

 parentCompoent.svelte

<script>import ChildComponent from './ChildComponent.svelte';let parentState = 'Hello from Parent';
</script><ChildComponent {childState={parentState}} />

ChildComponent.svelte

<script>export let childState;
</script><p>{childState}</p>

这种方法就是最简单的值传递，如果组件层次较深或者状态需要在多个组件之间共享，就会很麻烦

Context（上下文）

 Svelte 中的 getContext 和 setContext 可以用于在组件树中传递上下文信息。通过在祖先组件中设置上下文，所有后代组件都可以访问该上下文。这种方法适用于跨越多层级组件的状态共享。

App.svelte

<script>import { createContext } from 'svelte';export const AppContext = createContext();let sharedState = 'Hello from Context';// 在此处将共享状态传递给子组件const context = { sharedState };
</script><AppContext.Provider value={context}><ChildComponent />
</AppContext.Provider>

 ChildComponent.svelte

<script>import { getContext } from 'svelte';import { AppContext } from './App.svelte';const { sharedState } = getContext(AppContext);
</script><p>{sharedState}</p>

创建上下文对象：React.createContext()   会返回一个包含Provider和Consumer的对象

提供数据：使用上下文对象的Provider组件来提供数据

                  通过value属性来传递需要共享的数据

消费数据：在需要访问共享数据的组件中，用Consumer或useContext钩子来获取上下文值

Stores（存储）

Svelte stores 是一种用于管理应用程序状态的机制，可以在不同的组件之间共享状态。你可以使用 writable、readable、derived 等不同类型的 store 来管理不同的状态，并在需要时在组件之间共享这些状态。这种方法适用于更复杂的状态共享需求，例如全局状态管理或跨多个组件的状态共享。

[svelte]stores全局状态容器-CSDN博客

事件（Events）

 组件可以通过触发事件来向父组件通知状态的变化，父组件可以监听这些事件并相应地更新状态。这种方法适用于单向数据流的场景，其中父组件负责管理状态，而子组件负责通知状态的变化。

EventBus.js

// EventBus.js
import mitt from 'mitt';
export const eventBus = mitt();

 Compoent1.svelte

<!-- Component1.svelte -->
<script>import { eventBus } from './EventBus.js';const handleClick = () => {eventBus.emit('message', 'Hello from Component 1');};
</script><button on:click={handleClick}>Send Message</button>

Compoent2.svelte

<!-- Component2.svelte -->
<script>import { eventBus } from './EventBus.js';let message = '';eventBus.on('message', msg => {message = msg;});
</script><p>{message}</p>

mitt是第三方库，用来创建一个事件总线

在 Component1.svelte 组件中，当按钮被点击时，通过事件总线 eventBus 发送了一条消息

在 Component2.svelte 组件中，监听了事件总线 eventBus 上的 message 事件，并在事件触发时更新了组件的状态 message

这样，当 Component1.svelte 中的按钮被点击时，会触发 message 事件，Component2.svelte 中的状态 message 会被更新为接收到的消息，从而实现了在组件之间传递状态的功能。

全局变量: 如果状态需要在整个应用程序中共享，并且不需要在组件之间传递，你可以将状态保存在全局变量中。这种方法适用于全局性的状态共享需求，但要注意全局变量可能会导致状态管理变得不可预测和混乱。

 在JavaScript中有几种方式可以来定义全局变量

 1.直接声明在全局作用域下面

// 在全局作用域下声明全局变量
let globalVar = 'I am a global variable';

2.在window对象上定义属性

// 将变量挂载到 window 对象上
window.globalVar = 'I am a global variable';

3.使用var关键字声明

// 使用 var 声明全局变量
var globalVar = 'I am a global variable';

在模块化开发中，如果使用了 ES6 的模块系统（比如在 Node.js 中使用 CommonJS 或在浏览器中使用 ES6 的 import/export），那么每个模块都有自己的作用域，变量默认不会成为全局变量。如果你想在模块间共享变量，可以通过 export 导出变量，并在其他模块中使用 import 导入。