在之前的练习中，我们在组件内部使用符文来添加响应式。但我们也可以在组件外部使用符文，例如共享一些全局状态。

本练习中的 <Counter> 组件都从 shared.js 导入了 counter 对象。但它是一个普通对象，因此当你点击按钮时什么都不会发生。将该对象包装在 $state(...) 中：

export const counter = $state({
	count: 0
});

这会导致一个错误，因为你不能在普通的 .js 文件中使用符文，只能在 .svelte.js 文件中使用。让我们来修复这个问题 — 将文件重命名为 shared.svelte.js。

然后，更新 Counter.svelte 中的导入声明：

<script>
	import { counter } from './shared.svelte.js';
</script>

<script lang="ts">
	import { counter } from './shared.svelte.js';
</script>

现在，当你点击任何按钮时，所有三个计数器都会同时更新。

如果 $state 声明被重新赋值（而不是仅仅被修改），你就不能从模块中导出它，因为导入者将无法知道这个改变。