mountedをvuex化したい。

Question

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

#　やりたいこと
vuetify＋vue-cliでtodoアプリ(講義さぼり回数カウントアプリ）を作っています。
授業名を入力してEnterを押すことで、欠席回数をカウントできるリストが出力されます。
下記URLです↓
https://vuejs-http-e3587.firebaseapp.com/
もちろんjsのlocalStorageという機能を使ってカウントもメモも永続化しています。
今まで、vuexを使っていなかったのでこれらをvuexに書き変えようとしました。

vuexに書き変えていない正常に動くブランチのソースコード

Count.vue

<template>
  <v-app>
    <v-content>
      <v-container>
        <v-row>
          <v-col cols="6">
            <v-text-field v-model="name" label="授業名" @keyup.enter="addTodo" required></v-text-field>
          </v-col>
        </v-row>
        <div v-for="(todo,index) in todos" :key="todo.name">
          <v-card card_id max-width="344" class="mx-auto">
            <v-card-title>{{todo.name}}</v-card-title>
            <v-card-text>
              <v-text-field label="メモ" v-model="todo.memo" @input="addMemo"></v-text-field>
            </v-card-text>
            <v-card-actions>
              <v-btn @click="increment(todo)" color="primary">さぼり回数</v-btn>
              <span>{{ todo.count }}</span>
              <v-btn @click="decrement(todo)" color="error">間違い（－）</v-btn>
              <v-btn @click="deleteItem(index)">削除</v-btn>
            </v-card-actions>
          </v-card>
        </div>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      name: "",
      todos: [],
      memo: []
    };
  },
  mounted() {
    this.todos = JSON.parse(localStorage.getItem("todos")) || [];
  },
  methods: {
    templateJson() {
      let setJson = JSON.stringify(this.todos);
      localStorage.setItem("todos", setJson);
    },
    addMemo() {
      this.templateJson();
      this.isActive = false;
    },
    addTodo() {
      if (this.name != "") {
        this.todos.push({
          name: this.name,
          count: 0
        });
      }
      this.templateJson();
      this.name = "";
    },
    increment(todo) {
      todo.count++;
      this.templateJson();
    },
    decrement(todo) {
      if (todo.count > 0) {
        todo.count--;
      }
      this.templateJson();
    },
    deleteItem(index) {
      this.todos.splice(index, 1);
      let setJson = JSON.stringify(this.todos);
      localStorage.removeItem("todos");
      localStorage.setItem("todos", setJson);
    }
  }
};
</script>

vuexに書き変えた際の問題点

悩んだ点として、mountedのthis.$store.state.todos =
JSON.parse(localStorage.getItem("this.$store.state.todos")) ||
の部分をvuexに書き変える部分が分かりませんでした。
一応、データを扱っていたので、gettersで書き変えを試みましたが、授業名を入力すると次のようなエラーを吐きました。

下記ソースコードです。↓

Count.vue

<template>
  <v-app>
    <v-content>
      <v-container>
        <v-row>
          <v-col cols="6">
            <v-text-field v-model="$store.state.name" label="授業名" @keyup.enter="addTodo" required></v-text-field>
          </v-col>
        </v-row>
        <div v-for="(todo,index) in ($store.state.todos)" :key="todo.name">
          <v-card card_id max-width="344" class="mx-auto">
            <v-card-title>{{todo.name}}</v-card-title>
            <v-card-text>
              <v-text-field label="メモ" v-model="todo.memo" @input="addMemo"></v-text-field>
            </v-card-text>
            <v-card-actions>
              <v-btn @click="increment(todo)" color="primary">さぼり回数</v-btn>
              <span>{{ todo.count }}</span>
              <v-btn @click="decrement(todo)" color="error">間違い（－）</v-btn>
              <v-btn @click="deleteItem(index)">削除</v-btn>
            </v-card-actions>
          </v-card>
        </div>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import { mapActions } from "vuex";

export default {
  data() {
    return {};
  },
  mounted() {
    this.$store.state.todos = this.$store.getters.getItemJson;
  },
  methods: {
    ...mapActions([
      "templateJson",
      "increment",
      "decrement",
      "addMemo",
      "addTodo",
      "deleteItem"
    ])
  }
};
</script>

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    name: "",
    todos: [],
    memo: []
  },
  getters: {
    getItemJson(state) {
      state.todo = JSON.parse(localStorage.getItem("state.todos")) || [];
    }
  },
  mutations: {
    templateJson(state) {
      state.todos = JSON.parse(localStorage.getItem("state.todos")) || [];
      let setJson = JSON.stringify(state.todos);
      localStorage.setItem("state.todos", setJson);
    },
    addMemo() {
      this.templateJson();
      this.isActive = false;
    },
    addTodo(state) {
      if (state.name != "") {
        state.todos.push({
          name: state.name,
          count: state.count
        });
      }
      state.name = "";
      this.templateJson();
    },
    increment(state) {
      state.count++;
      this.templateJson();
    },
    decrement(state) {
      if (state.count > 0) {
        state.count--;
      }
      this.templateJson();
    },
    deleteItem(state, index) {
      state.todos.splice(index, 1);
      let setJson = JSON.stringify(state.todos);
      localStorage.removeItem("state.todos");
      localStorage.setItem("state.todos", setJson);
    }
  },
  actions: {
    toggleSideMenu({ commit }) {
      commit("toggleSideMenu")
    },
    templateJson({ commit }) {
      commit("templateJson")
    },
    addMemo({ commit }) {
      commit("addMemo")
    },
    addTodo({ commit }) {
      commit("addTodo")
    },
    deleteItem({ commit }, index) {
      commit("deleteItem", index)
    },
    increment({ commit }, state) {
      commit("increment", state)
    },
    decrement({ commit }, state) {
      commit("decrement", state)
    },
  }
})

#　自分のエラーの原因の考察
templateJsonメソッドで、データを保存しているのですがmounted（gettersの getItemJsonメソッド）でデータを取得した実装がうまくいってないので結果的にデータ保存ができていない。自分の見解はこんな感じです。
mountedの部分をvuexでどのように書き変えればvuex書き変え前と変わらない挙動ができますか？
アドバイスあればお願いします。

全コード

➀　vuex書き変え前の上手く挙動する方のブランチのソースコード↓
https://github.com/masal9pse/courageTodo/tree/develop
➁　vuex書き変え後の動かないブランチのソースコード
https://github.com/masal9pse/courageTodo/tree/vuex

参考にしたサイト

➀　https://vuex.vuejs.org/ja/guide/getters.html

➁　https://wp.tech-style.info/archives/742#toc8

Answer 1

ストアの値はミューテーションからのみ変更することができます。また、ゲッターはストアのデータを抽出するための機能ですのでゲッターからストアへ値をセットする方法は誤りとなります。
mountedの処理は以下のようにすれば注入可能だと思います。

mutations: {
  setTodos(state) {
    state.todo = JSON.parse(localStorage.getItem("state.todos")) || [];
  }
}

mounted() {
  this.$store.commit('setTodos')
}