60301


環境  
windows10(64)  
"vue": "^2.6.10",  
"vuetify": "^2.1.0",  
"vue-cli":"3.11.0",  
"node":"v11.13.0",  
プログラミング歴 ４か月ほど

# 作っているもの

講義さぼり回数をカウントするtodoリストを作っています。

<https://vuejs-http-e3587.firebaseapp.com/>

# やりたいこと

ページロード（再読み込み）してもカウントが永続化できるようにしたい。

#  実際の動作（画像）

ロードするとカウントが0に戻ってしまう。  
[![画像の説明をここに入力](https://i.stack.imgur.com/b0qQ6.png)](https://i.stack.imgur.com/b0qQ6.png)

↓再読み込み  
[![画像の説明をここに入力](https://i.stack.imgur.com/phVK0.png)](https://i.stack.imgur.com/phVK0.png)  
↓するとカウントが0に戻ってしまう。  
[![画像の説明をここに入力](https://i.stack.imgur.com/A7KDI.png)](https://i.stack.imgur.com/A7KDI.png)

問題が発生しているコード  
<https://github.com/masal9pse/courageTodo/blob/develop/src/components/Count.vue>

# 試したこと

その１ 単純にカウントにlocalstrageを使う

[code]

    @@ -37,6 +37,7 @@ export default {
      },
      mounted() {
        this.todos = JSON.parse(localStorage.getItem("todos")) || [];
        this.count = JSON.parse(localStorage.getItem("count")) || [];
      },
      methods: {
        addTodo() {
    @@ -48,7 +49,9 @@ export default {
          }
          let setJson = JSON.stringify(this.todos);
          let setCount = JSON.stringify(this.count);
          localStorage.setItem("todos", setJson);
          localStorage.setItem("count", setCount);
          this.name = "";
        },
        increment(todo) {
    
[/code]

Count.vueのコードhttps://github.com/masal9pse/courageTodo/blob/develop2/src/components/Count.vue

#  結果

上記と同じでロードすると0になる。  
コンソールのエラー文はなし。ローカルストレージの保存状況は下記  
[![画像の説明をここに入力](https://i.stack.imgur.com/r8xSU.png)](https://i.stack.imgur.com/r8xSU.png)

拙い質問ですが、回答お願いします！


CC BY-SA 4.0
2019-11-06T17:51:39.723
60300
2019-11-06T18:09:07.137
36424
question
vue.js
vue-cli,localstrageでカウントを再読み込みしても永続化できるようにしたい


increment, decrementのメソッドでローカルストレージを更新していないためです。

例えば、カウンタを上げたあとにtodoを追加してみてください。その後リロードすれば、追加した直前のカウントは保持されていますよね？

（当該コードは質問内に貼るようにしてください）


CC BY-SA 4.0
2019-11-06T18:09:07.137
60301
2019-11-06T18:09:07.137
2376
60300
answer