Vuexのstateはundefinedで初期化しちゃダメ？
条件付きではありますが、あまりよくないらしいです、全然知らなかった…
ちなみに、undefined で初期化という表現自体おかしいですが、今回はわかりやすさ重視でこう書いちゃいます。
なぜ気づいたか
Vuex に対し jest でテストを書いていたところ、undefined で初期化した state が更新されないことがあったため。
根拠
vue-class-component#undefined-will-not-be-reactive
To take consistency between the decorator behavior of Babel and TypeScript, vue-class-component does not make a property reactive if it has undefined as initial value. You should use null as initial value or use data hook to initialize undefined property instead.
↓ Google 翻訳
Babel と TypeScript のデコレータの動作の一貫性を保つために、vue-class-component は、初期値として未定義のプロパティをリアクティブにしません。 代わりに、null を初期値として使用するか、データフックを使用して未定義のプロパティを初期化する必要があります。
vuex-module-decorators#state value may be undefined on purpose
State values should never be initialized undefined on purpose. It makes them loose reactivity. Initialize them as null if you want to.
↓ Google 翻訳
状態値は、意図せずに未定義に初期化されることはありません。 それはそれらに緩い反応性を与えます。 必要に応じて、null として初期化します。
リアクティブとは
props が更新されたら、それに応じた View が更新されるってことみたいです。
つまり
「vue-class-component や vuex-module-decorators を使用した場合に限るかもしれないが、Vuex の state を undefined で初期化した場合、その state を更新しても、対応する View が即座に更新されないよ。」ということみたいです。
loose reactivity ってところが面白いですね。
これを踏まえて、TypeScript や decorator の使用の如何に関わらず、Vuex の state は undefined で初期化しないほうが良さそうだなーと思いました。
Redux はどうなのさ
少しだけ調べてみましたが、特に情報が見つからず…過去の開発では、undefined で初期化して特に問題が起きた記憶はありません。
ちなみに
TypeScript チームは、null を使用していません、全て undefined で統一しています。
TypeScript で null を扱うケース自体、かなりレアだと思っていたので、今回の結論は意外でした。