VuexとVue Routerの導入方法

Vue.js

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

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

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

 

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

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

Vuexのインストール

npm install vuex babel-polyfill

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

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

また、

npm install vuex@3.0.1

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

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

cd src
mkdir store
cd store
touch index.js

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


import 'babel-polyfill'
import Vue from 'vue'
import Vuex from 'vuex'
// プラグインを登録
Vue.use(Vuex)

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

src/store/index.js

import 'babel-polyfill'
import Vue from 'vue'
import Vuex from 'vuex'
// プラグインを登録
Vue.use(Vuex)

// ストアを作成
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    count: state => state.count
  },
  mutations: {
    // カウントアップするミューテーションを登録
    increment: state => state.count++,
    decrement: state => state.count--
  }
})

export default store

Vue Routerの導入

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

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

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

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Sample from '@/views/Sample'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Sample',
      component: Sample
    }
  ]
})

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

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

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

<router-view/>

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

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

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

import Vue from 'vue'
import App from './App'
import router from './router'
import store from '@/store/index.js'


Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,//ルーターをアプリケーションに登録
  store,//ストアをアプリケーションに登録
  components: { App },
  template: '<App/>'
})

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

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

などの記述をせずに

this.$store.state.count

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

Sampleコンポーネントの作成

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

 

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

mkdir src/views
cd src/views
touch Sample.vue

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

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

src/views/Sample.vue

<template>
  <div>
    <p>{{ countNum }}</p>
    <button v-on:click="clickPlus">プラス</button>
    <button v-on:click="clickMinus">マイナス</button>
  </div>
</template>

<script>
export default {
  name: 'Sample',
  computed: {
    countNum() {
      return this.$store.getters.count
    }
  },
  methods: {
    clickPlus() {
      this.$store.commit('increment')
    },
    clickMinus() {
      this.$store.commit('decrement')
    }
  }
}
</script>

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

src/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
  import Sample from '@/views/Sample.vue'
  export default {
    name: 'App',
    components: { Sample },
  }
</script>

<style>

</style>

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

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