Vue CLI 3 ではじめるVue RouterとVuex入門

2019年2月15日

Vue CLI 3(Command Line Interface)を利用して、ルーティング処理を施すVue Routerと、データの状態管理をおこなうVuexによるアプリ構築の概略を説明してみます。

 

 

インストール


 

まずはVue CLIをインストールします。Node.jsのバージョンは8.9以上が必要です。

Yarnを利用する場合は下記のようにします。

 

バージョンを指定する場合は下記のようにします。

 

ついでに単一ファイルコンポーネントを手軽に起動できるvue serveやvue build等のコマンドを利用するための@vue/cli-service-globalもインストールしておきます。

同じくYarnを利用する場合は下記のようにします。

 

本記事執筆時点でバージョンは3.4.0になります。

 

もし@vue/cliではなくvue-cliをすでにインストールしている場合は、アンインストールしておく必要があります。

 

 

プロジェクト作成


 

vue createでプロジェクトを作成します。今回は「my-project」という名前のプロジェクトにします。

 

まず「default〜」か「Manually〜」かを選択します。本記事ではVue RouterとVuexを利用するので「Manually〜」の方を選択します。

 

Router」と「Vuex」を追加設定しておきます。

 

Vue RouterのHistoryモードについてはYesを選択しておきます。

 

HTML5 History モード

 

Lintとフォーマッター機能を選択します。今回はそのまま進みます。

 

Lintが実行されるタイミングを選択します。今回は「保存時」で進みます。

 

Babel等各種ライブラリの設定方法を選択します。今回はそのまま進みます。

 

上記でおこなってきた設定内容を保存しておくかを問われます。今回は「N」を選択します。

 

確定ししばらくすると下記のように表示され、my-projectプロジェクトが生成されているのが確認できます。

 

実際に「npm run serve」コマンドを実行すると、ブラウザで下記のような画面を確認することができます。上部にHomeとAboutのリンクがあり、それぞれの画面に遷移できます。後で説明するように、それぞれの画面はHome.vueおよびAbout.vueコンポーネントによって作成されています。

 

↓トップページであるHome画面

 

 

↓下記はAbout画面

 

 

上記で記述したプロジェクト作成の過程は、下記コマンドで起動するブラウザのUI上でも実行することができます(本記事では説明しません)。

 

 

プロジェクトの構成


 

Vue CLI 3によって実際に生成されたプロジェクトは下記のような構成になっています。

App.vue

アプリケーションのルートコンポーネントです。8行目の<router-view/>の部分には、URLのパスと一致するコンポーネントが組み込まれ表示されていきます。viewsの項目を参照して下さい。

 

main.js

App.vueを取り込み、index.htmlと紐づけています。routerおよびstoreのインスタンスをVueに設定しているのが確認できます。この設定によってどのコンポーネント内においても、$store〜のように記述することによってストアのデータを取得できるようになります(後述)。

 

components内には、アプリケーションで使用するコンポーネントが配置されます。デフォルトではすでにHelloWorld.vueが存在しますが、これはHome.vue内で部品として使用されています。

 

関連ページ

Vue.jsのコンポーネント入門[props][$emit]

 

views内には、主にVue Routerでルーティングする、いわゆるURLのパスに一致する画面単位でのコンポーネントが配置されます。プロジェクト生成時には、すでにHome.vueとAbout.vueが生成されていますが、それぞれトップ画面(/)としてルーティングされているHome画面とAbout画面(/about)のコンポーネントになります。

 

router.js

Vue Routerの設定ファイルです。

 

store.js

Vuexのストアによってデータを一元管理する設定ファイルです。デフォルトではまだデータは管理されていません。

 

 

プロジェクトのビルド


 

公開用のファイル群を生成するためのビルドは、下記コマンドによって実行できます。ビルドすると「dist」フォルダが生成されます。本記事では説明しません。

 

 

簡単なカウンターアプリの構築


 

上記で作成した「my-project」プロジェクトを元に、ご多分に漏れず簡単なカウンターアプリを実装してみます。

 

Vue Routerで管理するページを1画面増やし、またVuexによるストア機能によってカウンターの数値を一元管理してみます。

 

まずはプロジェクト作成時にデフォルトで存在するHome・About画面に対して、1画面増やしてみます。追加するのは画面単位でのコンポーネントになるので、componentsディレクトリ内ではなくviewsディレクトリ内にCount.vueという名前のファイルを新規追加します。

 

 

次にrouter.jsを編集します。Count.vueが、URLのパス「/count」で表示されるように設定します。

 

App.vueに、画面へ遷移するリンクを付け足します。

 

以上でまだ画面上部にリンクしか表示されていませんが、「localhost:8080/count」にて下記のような画面が確認できます。

次にカウンターアプリとしての機能を追加していきます。上記で作成したCount画面にて、Vuexによるストアで一元管理している数値をカウントする機能を実装しています。

 

 

まずは、store.jsを下記のように編集します。

state

このcountデータは「$store.state.count」のように記述することによって、様々なコンポーネント内において取得できます。stateに記述したデータを更新する処理は、mutationsに記述していきます。

 

mutations

countデータを加減させる2つの処理(increment/decrement)を記述しています。例えばコンポーネント内において、このmutations内のincrementの処理を呼び出すには、commitメソッドを利用して「this.$store.commit(“increment”)」のように記述します。

 

actions

API通信や非同期処理はこのactionsに記述していきます。上記ではmutationsのincrement処理を呼び出し、その処理が5秒後に実行されるよう記述しています。例えばコンポーネント内において、このactions内のincrementの処理を呼び出すには、dispatchメソッドを利用して「this.$store.dispatch(“increment”)」のように記述します。

 

 

そしてまだ空白であるCount.vueを下記のように編集します。これでカウンターアプリとしての機能はとりあえず完成です。

4行目

上述したように、Vuexのストアに状態として管理されているcountデータを取得しています。

 

14、17行目

上述したように、commitを利用しているのでmutationsの方のincrement処理を実行しています。仮に14行目を下記のようにdispatchで呼び出した場合、actionsの方のincrement処理が呼び出されるので「+」ボタンをクリックして5秒後に数値が増える挙動に変化します。

 

 

ヘルパー関数を利用してCount.vueを下記のように記述することも可能です。

本記事では説明しませんが、ヘルパー関数としては他にもmapStateやmapGetters、mapActionsが存在します。

 

例)actionsの方のincrementを呼び出したい場合

 

最後にAbout.vueも下記のように編集してみて下さい。Vuexのストアで数値が管理されているのでCount画面で変更した数値が、About画面に切り替えてもしっかりと同期されているのが確認できます。

 

 

参照ページ


Vue CLI 3

Vue Router

Vuex

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー