VueとTime Travel Debuggingについて分かったことと、それでもEventのLogが欲しい気がする話

Time Travel Debuggingってなんだっけ

Vuexを用いた開発プロジェクト用にガイドラインを作成した話 - Qiita

を読んで、

最終的にチーム内で合意に至ったのは「パフォーマンスが懸念されるなどの特別な理由がない限り、原則として全ての状態をVuexのStoreで管理する」という方針です。

この決定に至った理由としては以下が挙げられます。

  • Time Travel Debuggingが可能になるため、デバッグがしやすくなる
  • テストがしやすくなる
  • 複数人による開発の中で状態管理に一貫性が生まれる

というくだりを読んで、あれ、Time Travel って Vuex 使わないとできないんだっけ？ と思って確認してみた。

試してみた

Vue DevTools 5.0.0 で確認（なぜか 5.1.0 がうまく動かなかった）

Vue DevTools 上の Vuex タブで mutations の履歴を取得できる。この mutation は record された単なる events と違い、実際の変更の記録であり、以下の3つの操作を行える。

  • export
  • import
  • commit all

ということで、「手元で起きたことを他の環境に持って行って」再検証することができる。

これが Time Travel Debug.

あーこれ Event Sourcing の話にも通じるのか。

Eventとの違い

Vue DevTools 上では Event も record できるのだけど、Event は単なる Event であり、record はできるが replay はできない。

これは Event はどこで起きるかもその結果を受けて何を行うかも自由なので replay の難易度が高いということかな？ Vuex Store への「変更」に関しては確実な操作（ユーザーの操作ではないけど）の記録であり、Vuex Store 上で replay することは Event をそのまま replay するより難しくない気がする。component が正しく Vuex の state の変化に対して Reactive に動作すればこれで十分である。

雑感

各 component のレベルで data の変更に対して Time Travel できるとより便利っぽい。でもそれができれば先のガイドラインの判断基準がなくなっちゃうのか。

それとは別に Event の export くらいはできるようになってほしいんだけどなぁ…。思わん？

More