localStorageを呼び出すタイミング

Question

前提・実現したいこと

vue.jsで簡易アプリをしているのですが、
localStorageを呼び出すタイミングが上手くいきません。

発生している問題・エラーメッセージ

下記のコードで、localStorageを呼び出しているつもりなのですが、
データが消えてしまいます。

mounted: function() {
    this.items = JSON.parse(localStorage.getItem('items')) | [];
  },

該当のソースコード

<div id="app">
    <ul v-for="item in items">
      <li>{{item.id}}</li>
    </ul>
    <p @click="addItem">
     クリックで追加
    </p>
   </div>

var vue = new Vue({
	el:'#app',
  data: {
  	items:[
     {id:'a',text:'aaa'},
     {id:'b',text:'bbb'}
    ]
  },
  methods: {
    addItem:function(){
     let todo = {id:'c', text:'ccc'}
      this.items.push(todo)
    }
  },
  watch: {
    items: {
      handler: function() {
        localStorage.setItem('items', JSON.stringify(this.items));
      },
      deep: true
    }
  },
  mounted: function() {
    this.items = JSON.parse(localStorage.getItem('items')) | [];
  },
})

試したこと

mountedのタイミングが誤っていると考え、vue.jsのライフサイクルを各種試してみましたが、上手くいきませんでした。

動作確認用として、Githubにファイルをアップロードしました。

githubのURL https://github.com/kondo97/demo.git
動作確認用のURL　https://kondo97.github.io/demo/

#その他
お分かりになる方がいらっしゃいましたら、ご教授いただけると大変助かります。
よろしくお願いいたします。

Answer 1

|が1本だけなので、両辺を数値演算で結ぶ結果となってしまいます。おそらく、||とするのが適切です。

Comments

[genjiro]

その点も間違えておりました。
しかし、||に変更しても、上手くいきません。
まだ、原因はある模様です...

[genjiro]

空配列の指定が誤っていることが判明しました。itemsに初期値を入れておきたかったのですが、空配列を指定することで消えていたようです（当然ではありますが、、）。ローカルストレージを呼び出す際に、ローカルストレージに初期値を保存→呼び出しという手順を取りました。ご回答ありがとうございました。