6/9 Vue.js

自分なりの解釈

コンポーネントを跨いでデータをローカルストレージに保存する流れ

子側のコンポーネントから親側に値を渡してローカルストレージに保存する必要がある。

子側から値を渡すためにthis.$emit('任意のイベント名',　渡したい値)とする。

親側でrouter-viewタグで@任意のイベントとして値を受け取りつつメソッドを実行する。

実行するメソッドの引数にeを渡すことで、子側から渡された値がeから取り出せる。

eから必要な情報を必要な形に加工して親側のdataに保存。

保存したらローカルストレージに保存するメソッドを実行

JSON.stringify(加工したいdata)でインスタンス化する

オブジェクトのままだとローカルストレージには保存できないので保存できる形に変更している。

localStorage.setItem(名前, インスタンス)とすることでローカルストレージに保存できる。

初めてローカルストレージを使用したので少し知識が曖昧な部分がある。

コードを削除して1から思い出しながら記述していく。