VuexとVue Routerの導入方法

Vue.js

VuexはVueのコンポーネント間のデータの共有をシンプルにしてくれる拡張プラグインです。

  • 複数のコンポーネント間のデータを共有
  • データの状態に関する処理をストアで共通化
  • 大きな状態管理もモジュールで細分化

といったメリットがあります。

 

また、Vue RouterはVue.jsでシングルページアプリケーション(SPA)を構築するための拡張プラグインです。

通常のページ遷移でなく、必要なものだけ部分的に書き換えることができるような仕組みが作れるようになります。

Vuexのインストール

上のコマンドでvuexとbabel-polyfillの最新版をインストールします。

polyfillというのは古いブラウザでサポートされていないもの、新しいブラウザで対応しきれていないものなどのバグ不具合を無くしてくれるものです。

また、

とすれば、バージョン指定のインストールができます。

では、Vuex アプリケーションの中心となるストアを作ってみます。
まずは、storeディレクトリの中にindex.jsを作成しましょう。

そして、index.jsにVuexを登録しましょう。

ポリフィルは最初に読み込み、プラグインであるvuexを登録しています。

src/store/index.js

Vue Routerの導入

Vue Routerはvue-cli導入時に、初期インストールしていればrouter/index.jsがあるはずです。

なければ、インストールが必要です。

router/index.jsはSample.vueをインポートするように設定し、nameとcomponentを登録しておきます。

src/router/index.js

Sample.vueをルートのコンポーネントとしています。

このように、router/index.jsでルーティングの設定を行い、

親コンポーネントであるApp.vue(Appコンポーネント)で

<router-view/>

を使うとSample.vueが描画されるのです。

main.jsでアプリケーションに登録する

storeとrouterをアプリケーションに登録しておきます。

こうすることで、コンポーネントでいちいち

import store from ‘@/store/index.js’

などの記述をせずに

this.$store.state.count

などのように使用できるようになります。

Sampleコンポーネントの作成

初期状態ではHelloWorld.vueが読まれる設定となっていますが、ここをSample.vueを変更します。
まずは、Sample.vueを作成。

 

慣習的にVue Routerのルートやルートと直接紐付けるコンポーネントはviewsやpagesなどのフォルダに紐付けるそうです。

とりあえず、今回はプラスボタンを押すと、ステートであるcountが+1され、マイナスボタンを押すとcountが−1されてリアルタイムに画面に表示されるようにします。

そこで、src/views/Sample.vueを以下のようにしました。

src/views/Sample.vue

App.vueでSample.vueをインポートするように設定し、componentsを登録しておきます。

src/App.vue

開発環境を立ち上げ(npm run dev)
ブラウザにアクセスすると、下記の画面が表示され、ボタンによってストアのcountの状態が変化します。

以上で、VuexとVue Routerの導入は完了です。