【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メソッド
を呼び出す方法に変わるので注意してください。
最後のまとめ
Vuexを使うことで保守性や再利用性の高いアプリケーションが開発できることが少しわかった気がしました。
最後に重要だった要点だけまとめておきます。
- Vuex→状態を一元管理するライブラリ
- 仕組みはstoreオブジェクトをimportして使いまわす
- storeオブジェクトには独自のオプションが複数
- stateはVue.jiで言うプロパティ(data)
- getterは算出プロパティ
- mutationはstateを操作するメソッド
- actionは非同期処理を行うエリア
- コンポーネントから呼び出す時はヘルパー関数が使える
まだまだ勉強中の初心者ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。