前の演習では、コンポーネント内でリアクティビティを追加するためにruneを使用しました。しかし、グローバルなステートを共有するために、コンポーネントの*外部*でもruneを使用できます。

この演習の<Counter>コンポーネントはすべて、shared.jsからcounterオブジェクトをインポートしています。しかし、これは通常のオブジェクトであり、ボタンをクリックしても何も起こりません。オブジェクトを$state(...)でラップしてください。

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

通常の.jsファイルではruneを使用できず、.svelte.jsファイルでのみ使用できるため、エラーが発生します。これを修正しましょう — ファイル名をshared.svelte.jsに変更します。

次に、Counter.svelteのインポート宣言を更新します。

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

これで、いずれかのボタンをクリックすると、3つすべてが同時に更新されます。

宣言が（単にミューテートされるのではなく）再割り当てされた場合、インポーターがそれを知る方法がないため、モジュールから$state宣言をエクスポートすることはできません。