以下を記録として残す

• 今後学習する内容
• エラーと対応方法

3-1 ListAddコンポーネントを作成しよう

• this.$store.dispatchでactionsを実行

this.$store.dispatch('アクション名')でactionsを実行できます。

actions, mutations, state, gettersについて深堀する

3-2 ユーザビリティなフォームにしよう

• methodsとcomputedの違い

3-3 Listコンポーネントを作成しよう

• mapヘルパーとは？

エラーが出た

Failed to compile.

./src/components/Board.vue?vue&type=template&id=e1ee1034& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"50528abb-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Board.vue?vue&type=template&id=e1ee1034&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 

  Errors compiling template:

  Invalid v-for expression: (item, index)in lists

  7  |          <p class="info-line">All: 0 tasks</p>
  8  |          <div class="list-index">
  9  |              <list v-for="(item, index)in lists"
     |                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  10 |                :key="item.id"
  11 |                :title="item.title"

原因

<list v-for="(item, index)in lists"
    :key="item.id"
    :title="item.title"
    :listIndex="index"
/>

• Invalid v-for expression: (item, index)in listsに注目
• <list v-for="(item, index)in lists" のfor〜in文のinの前にスペースがなかった
• 半角スペースを入れたら解決
• <list v-for="(item, index) in listsこれで解決

3-4 リストを削除できるようにしよう

• actions, mutations, state, gettersとは？

×を押してもカードが削除されなかった

エラーはなかったが、consoleには以下が表示。
[vuex] unknown action type: removeList

methods: {
        removeList() {
            if(confirm('本当にこのリストを削除しますか？')) {
                this.$store.dispatch('removeList', { listIndex: this.listIndex })
            }
        }
    }

原因

• removeListが大文字になっていた
  →this.$store.dispatch('removeList', { listIndex: this.listIndex })

• ルールを知らないが故のミス（actions, mutations, stateあたりをちゃんと学習する）

• 以下で動作した

    methods: {
        removeList() {
            if(confirm('本当にこのリストを削除しますか？')) {
                this.$store.dispatch('removelist', { listIndex: this.listIndex })
            }
        }
    }

4-1 CardAddコンポーネントを作成しよう

• actions内に記述する引数（context, payload）には何が入っているのか？
  →console.logでは確認できなかった。

• state → mutations → actionsの流れで定義するかと思ったが、逆で解説されており混乱した。
  →必ずしも上記順番通りでないこともある？（不明確）