Vue Storeのstateをコンポーネントのローカルstateにコピーする 例えばAPIで取得し、storeに格納したデータをコンポーネント側で表示し、さらにそれを編集したいということがある
この場合、該当のstateをmapStateで参照することができる
そのままコンポーネント側で値を更新すると、mutationを経由しないでstoreを更新することになる。故に、dev-toolsでstoreの更新が検知されない(実際には更新されている)
Nuxtでstoreをmodule modeにした場合は、mutation経由してないよと怒られる
ユーザの一つ一つの操作でstoreの更新を確定するのであれば、mutationを呼び出してあげればいいが、仮の状態(storeの更新を確定しない編集)の場合、コンポーネント内のローカルstateで切り出したい
mapStateで参照してきたstateをローカルstateにdeepcopyして、それを更新する。確定したタイミングでmutationを呼び出し、storeを更新する
JSON.parse(JSON.stringify(object))でディープコピーを作れる(元のオブジェクトと別のオブジェクトを参照するようになる)
Object.assignで生成したオブジェクトは、内部のオブジェクトを参照する際に元のオブジェクトに向いているのでディープコピーにならない
JSONを使ったディープコピーの場合、オブジェクトの内部がオブジェクト or プリミティブでないと正しくコピーされない。Functionとか含まれているとNG