2021/12/24

【Vue.js】Vuexの導入方法と使い方まとめ！超初心者向け

この記事からわかること

Vuexとは？
Vuexの導入方法
使い方とオプションの違い
ステートやミューテーションの仕組み
axiosを使った非同期処理との連携方法

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

この記事は自分の備忘録を兼ねて、Vuexの概要とポイント、使い方などを超初心者向けにまとめています。

Vuexとは

Vuexとはアプリ内の状態(Vue.jsでいうデータやメソッド)を一元管理できるVue.jsのライブラリの1つです。

Vue.jsの特徴である再利用を目的としたコンポーネント(部品)。そのコンポーネント内で同じデータやメソッドをさらに再利用したい時はpropsやemitで受け渡しを行うことができます。しかしVuexを導入することでより簡単にまた管理しやすくデータやメソッドを取り扱うことができるようになります。

Vue.jsアプリケーションでVuexを使うメリット

データを一元管理できる
コンポーネント間のデータ受け渡しが楽
データやメソッドの再利用がしやすい
階層を気にせず使用可能
保守性やメンテナンス性の向上

Vuexのメリットが発揮されるのはアプリが大きくなってきて再利用するデータやメソッドが増えた時です。アプリ構造が複雑になるとデータを渡したり、メソッドを再利用するたびに冗長なコードが増えてしまいます。

Vuexなら階層をあまり意識することなく受け渡しができ、1箇所で情報を管理できるので修正や手直しも楽になります。

Vuexを使うことで導入するときの手間や学習コストは少し増えてしまいますが、後のことを考えるとメリットの方が大きいです。

Vuexを構成する3つの基礎

Vuexを使おうと思ってもよくわからない言葉が一気にたくさん出てきてややこしいのでまずVuexの基礎となる部分だけをまとめてみます。

storeオブジェクト
stateオプション
mutationオプション

重要なのはこの3つです。どのようなものか見ていきます。

storeオブジェクト

データを一元管理するための基礎となるのがstoreオブジェクト(Vuex.storeオブジェクト)です。ここに管理したいデータやメソッドを記述するだけで再利用や受け渡しを行うことができます。

Vuex.storeオブジェクトはVue.jsのコンポーネントのようにexportして使用します。

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
    },
    mutations: {
    },

})

このファイルの設置場所や詳細は後述しています、今はVuexのベースになる部分なんだなと覚えておけばOKです。

stateオプション

storeオブジェクトに記述するstateオプションはVue.jsで言うデータ(data)部分という認識で良いと思います。state(ステート)は「状態」という意味になります。

// Vuex
state: {
    title: "タイトル",
    num: 1,
},

// Vue.js
data() {
  return {
    title: "タイトル",
    num: 1,
  };
},

記述方法や使い方もデータと同じイメージでOKです。ここに記述したステートがコンポーネントで定義なしで使用できるようになります。

mutationsオプション

mutation(ミューテーション)とは「変化、変異」といった意味の英単語です。言葉通り、状態(ステート)を変化させるためのメソッドを記述できます。stateオプションを操作する際は直接ではなくmutationを介して操作するのがルールになります。

mutations: {
  addCount() {
      state.num++;
  },
},

mutationsオプションもVue.jsのメソッドのように記述していきます。

まとめ

storeオブジェクト→使いまわす大元部分
stateオプション→データ部分
mutationsオプション→ステートを操作するメソッド

Vuexの導入方法

Vuexを使えるようにするには開発中のアプリにインストールしないといけません。導入方法は2つあります。

Vue CLIで最初から組み込む
後から追加する

1つ目はVue.jsアプリケーション(プロジェクト)をCLIで作成する時にオプションとして選択する方法です。 CLI(コマンドラインインターフェース)とはコマンドライン上でアプリを開発できるようにすることの出来るツールです。

プロジェクト作成時にカスタムインストールを選択することで有効に出来るライブラリを選べるようになるのでVuexを選んで作成すればインストールは完了です。

2つ目はプロジェクト作成後に追加で導入する方法です。コマンドラインを立ち上げプロジェクトにカレントディレクトリ(現在アクティブになっているフォルダ)を合わせ以下のコマンドを入力することでインストールできます。

$ vue add vuex

Node.jsを組み込んである場合は以下のコマンドでもOKです。

$ npm install vuex-persistedstate --save

Vuexの使い方

ここからはVuexを実際に使用する方法をまとめていきます。

先ほどの導入手順でインストールを終えたらCLIの場合はVue.jsプロジェクトのsrcフォルダの中に「store.js」または「storeフォルダ」＞「index.js」が自動生成されています。(後者のが新しいバージョンの場合の生成になります)

後から追加した場合は自動生成されないので自分でstoreフォルダ＞index.jsを作成しておきます。これ以降は「storeフォルダ＞index.js」を表すのに「store.js」と表記します。

├── Vue.jsプロジェクト
│  ├── public
│  └── src
│        ├── App.Vue
│        ├── main.js
│        └── store // またはここにstore.jsを追加
│               └──index.js // 追加

使用する流れ

ここで使用するまでの流れを確認します。

store.jsにVuex.storeオブジェクトを記述export
main.jsにimportしてアプリに登録
コンポーネントから呼び出す

流れとしてはこの通りです CLIの場合は2番までを自動生成してくれるのでコンポーネントから呼び出す方法さえ覚えれば使用できます。

コードを見てみます。

1. store.jsにVuex.storeオブジェクトを記述→export

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

Vue.use(Vuex)

export default new Vuex.Store({
  // オプションを追加していく
})

まずはVueオブジェクトとVuexが使えるようにimportしておきます。その下にエクスポートするstoreオブジェクトを生成していきます。

2. main.jsにimportしてアプリに登録

続いてVue.jsを起動させている「src」＞「main.js」の中に追記していきます。

import Vue from 'vue'
import App from "./App.vue";
import store from './store'; // 追記

new Vue({
    store, // 追記
    render: h => h(App)
}).$mount('#app')

「main.js」ではVueオブジェクトを指定のid値(今回は#app)にマウントしていますのでそこにVuexも登録しておきます。これでマウントしているid配下のコンポーネントからVuexにアクセスすることができるようになります。

ここでコンポーネントから呼び出す方法の前にstoreオブジェクトの中身を見ていきます。

storeオブジェクトの中身

storeオブジェクトの中身には先ほど紹介したオプションを記述します。

オプションの種類は以下の通りです。

strict

strict: true,

strictオプションでstateをmutation以外で変更することを厳密に(strict)許可するかしないかを選択できます。

開発中はこのルールを守るためにtrueにしておくのが基本です。本番運用する際には処理が遅くなる原因になるので無効化(オプション自体を記述しない)しておきます。

state

state: {
    title: "タイトル",
    num: 1,
},

先述したデータを記述しておくところです。

mutations

mutations: {
  addCount() {
      state.num++;
  },
},

先述したステートを操作するメソッドを記述しておくところです。

actions

actions: {
},

非同期的な処理がある場合に記述するところです。ここは後述で解説しています。

getters

getters: {
  bookCount(state) {
      return state.books.length
  },
}

ステートの値を加工する処理を記述するところです。算出プロパティのイメージ(厳密には違うけど…)

使用するのは大体以上の通りです。

mutationとgetterは混乱しがちですが、値を増やしたり減らしたり操作するのがmutation、値の情報(配列の個数やキー値など)を取得するのがgetterのようなイメージで良いと思います。

コンポーネントから呼び出す

Vuex.storeオブジェクトが生成できたらあとはコンポーネントから呼び出すだけです。既に指定したidに紐づいているのでコンポーネント側でわざわざimportする必要はありません。

例えばstateを呼び出すには以下のように記述します。

this.$store.state.ステート名;

例えばステート(users)をコンポーネント側のデータ(component_users)として再定義するなら以下のようになります。

computed: {
    component_users() {
      return this.$store.state.users;
    },
},

thisはクラスのインスタンス自身を指す特別な変数です。

mutationを呼び出す場合はmutationではなくcommitメソッドに変わります。commitメソッドの場合はmutationの名前を引数に指定します。

this.$store.commit('addCount');

getterの時はgetters.ゲッター名、actionの時はdispatch('名前')のように呼び出します。

this.$store.getters.getCount;
this.$store.dispatch('asyncConnect');

ヘルパー関数を使った呼び出し方

Vuexにはstateやmutationを呼び出しやすいようにmapXxxxxというヘルパー関数が用意されています。

mapState
mapMutations
mapGetters

ヘルパー関数を使うにはまずコンポーネント側に使用したいヘルパー関数をimportしなければなりません。

import { mapState, mapActions  } from 'vuex'

importできたらコンポーネントで再定義します。

stateを算出プロパティとして再定義する場合(Component側に記述)

computed:｛
...mapState(['ステート名'])
// スプレッド演算子を使えば他の算出プロパティも列挙できる
｝

スプレッド演算子(...)はオブジェクトや配列を分裂する構文です。スプレッド演算子を使うことでオプション内に項目を複数列挙できるようになります。

getterもmutationも呼び出し方は同じですがそれぞれimportしないと使えないので注意してください。

まとめ

ヘルパー関数(mapXxxx)で簡単に呼び出せる
使うには予めimportが必要
スプレッド演算子で複数列挙できるようにする

非同期処理を行う〜action〜

非同期処理とはサーバー側とクライアント側の処理のタイミングをずらして実行する技術のことです。

処理タイミングをずらすことでWebページをリロードしなくても表示画面を一部だけ更新でき、通信量も抑えることができます。

今回は例としてVue.jsでよく使うJavaScriptのライブラリの1つaxios(アクシオス)を使った非同期処理を見ていきます。

axiosでHTTP通信を行う処理は非同期で行われます。そのためこの処理をmutationに組み込むことはできません。非同期処理は処理結果がいつ終了するかわからないためmutationが複数ある場合予期せぬ処理順になってしまうことがあります。

非同期処理を記述するのはaction部分でした。なのでaxiosでの接続部分をaction内に記述していきます。stateの操作はmutationで行わないと行けないので帰ってきたresponseデータを変数に格納し、mutationの引数として渡します。

mutations: {
    getUsers(state, api) {
        state.users = api;
    },
},
actions: {
    async callUsers(context) {
        const response = await axios.get("/api/users");
        context.commit('getUsers', response.data);
    },
}

例えば上記はapiでユーザー情報を取得する場合のコードです。細かい説明は省きますが接続処理部分はactionに記述し、ステートへの格納処理はmutationに記述しています。

actionからmutationを呼び出す際は引数にcontextを受け取りcontextに対してcommitメソッドを呼び出す方法に変わるので注意してください。