時間の経過とともに変化する状態の値を追跡できることは、多くの場合便利です。

今回はaddNumber 関数内に console.log ステートメントを追加しました。ただし、ボタンをクリックした後にDevコンソールを開くと、警告と、メッセージを複製できなかったというメッセージが表示されます。

これは、numbers がリアクティブ プロキシ であるためです。できることはいくつかあります。まず、$state.snapshot(...) を使用して、状態の非リアクティブ スナップショット を作成できます。

function addNumber() {
	numbers.push(numbers.length + 1);
	console.log($state.snapshot(numbers));
}

あるいは、$inspect ルーンを使用して、状態が変化するたびにそのスナップショットを自動的に記録することもできます。このコードは、プロダクションビルドから自動的に削除されます。

function addNumber() {
	numbers.push(numbers.length + 1);
	console.log($state.snapshot(numbers));
}

$inspect(numbers);

$inspect(...).with(fn) を使用すると、情報の表示方法をカスタマイズできます。たとえば、console.trace を使用して、状態の変化の発生元を確認できます。

$inspect(numbers).with(console.trace);