【Vuex】使い方を学習した時の備忘録

概要

今回、Vue.jsの学習にVuexを使用してTodoアプリを作る機会があり、理解するのにつまづいた事があったため
備忘録という意味も込めて書いた記事です。
記事を書くことも初めてのため、見やすさなどは多めに見てもらえると嬉しいです！

コンポーネントについて

Vuexを知る前にそもそも、Vueには”コンポーネント”という概念があります。
コンポーネントとは”何かする部品”です。
このコンポーネントを組み合わせることで一連の動作ができる仕組みを作るということです。
車を例にすると、「ハンドルコンポーネント＋アクセルコンポーネント＋タイヤコンポーネント　＝　運転ができる」みたいなイメージです。

Vuexについて

先ほどの”コンポーネントについて”を踏まえてVuexの在り方を説明していきます。（これからの説明で運転の話をイメージするとややこしくなると思うので一旦忘れてください。。。）
実現したい動作のためにコンポーネント間でデータのやりとりをするわけですが、以下の図のようにやりとりする場合にいちいちコンポーネントを階層を踏んでやりとりすると開発者もどこにどうデータが移っていくのか見るのも面倒だったり、構造が複雑になると管理が大変になります。
ログインが発生するWebサイトでログイン情報を各ページに伝えるのは大変ですよね。

この管理の大変さを解消する時にVuexの出番です！
以下の図のように「ステート」というデータを一括管理する存在がいれば、各コンポーネントがステートにアクセスすることでデータの状態を管理しやすくなります。「状態管理」といいます。

使い方について

このVuexを使うには「store」という場所にデータを管理するための、ある意味の設定が必要になってきます。
この設定の一連の流れを説明していきます。

一連の流れ

Vuexを使うためには一連の流れがあり以下の流れで実装しました。
Vuexで関係している部分だけ抜粋しました。

pages/MainBody.vue

<template>
    <!-- 省略 -->
</template>
  
<script>
    /* 省略 */
  import { ref } from 'vue'

  let id = 3
  
  export default {
    /* 省略 */
    methods: {
        /* 省略 */
        setTodo($event) {
            this.tododay= $event;
            const newTodo = ref({ id: id, text: this.newTodoText })
            this.addTodo(newTodo);
        },
        addTodo(todo) {
            this.$store.dispatch('addTodo', todo)
        }
    },
    computed: {
        todos() {
            return this.$store.state.todos;
        }
    }
  }
  </script>
  
  <style>
    /* 省略 */  
  </style>

store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    todos: [
      {id: 1, text: "テスト１"},
      {id: 2, text: "テスト２"},
    ]
  },
  actions: {
    addTodo(context, todo) {
      context.commit('addTodo', todo)
    }
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo.value)
    }
  },
})

ざっくりとしたレシピ

1. イベント発生し「methods」に流れる
   1. 『setTodo($event)』から『addTodo(todo)』が呼び出される
   2. ”actions"を実行するトリガーを作る
      1. this.$store.dispatch('addTodo', todo)
2. 「actions」で「mutation」へコミットする流れ
   1. methodsのdispatchで命名された'addTodo'をactionsで追加する(todoは引数)
   2. actionsではmutationにデータをコミットするために"mutations"を実行する以下のトリガーを作る
      1. context.commit('addTodo', todo)
3. 「mutations」で「state」を更新する流れ
   1. actionsのcommitで命名された'addTodo'をmutationsで追加する(todoは引数)
   2. mutationsではstateの配列を更新するための処理を実装する
      1. state.todos.push(todo.value)
4. 変更された「state」を表示する
   1. 「computed」で「state」の配列である「todos」を'''todos()'''で実装する
   2. 表示したい「state」のオブジェクトを実装する
      1. return this.$store.state.todos;

まとめ

今回実装してみてわかったことは、状態管理とVuexの設定（実装）方法についてです。
Vuexでは「イベント発生→actionsでコミット→metationでstateを更新→computedで更新後のstateの表示」の流れで状態が更新できるということがわかりました。
実際、actiosなしでmurtationを使うことも可能だという記事もみたことがあるのですが、mutationsでは”同期”でなければならない、という決まりがあります。actionsは"非同期"の操作を行うことができるということなので、actionsを使ってやった方が安全そうですね。
また、Vuexの代替として「Composition API」というものがありますが、使い分けがあるのか、「Composition API」だけで事足りるのかについてはまだ分からないので追々学習してみようと思います。
まだまだ理解不足等ありますが、備忘録を書いてみました。
もし、皆さんのためになれば幸いです！