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

此练习中的<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>

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

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