【Vuex】Vuexでアプリケーションを画面に反映させる手順

簡単な例を使って独立したVuexでアプリケーションjsファイルを画面に反映させるまでの手順を分解していきましょう。

store.jsの作成

まずはアプリケーションjsファイルを、/srcディレクトリ直下に作成します。

//importしておくことでこのjsファイル内にて使用することができます。
import 'babel-polyfill'
import Vue from 'vue'
import Vuex from 'vuex'
// Vue.use()でimportしたVuexを指定しましょう。
Vue.use(Vuex)

// ストアを作成
const store = new Vuex.Store({
 // stateはVue.jsでいうところのdataです。
  state: {
    count: 0
  },
 // mutationsはstateにデータを反映させるためのものです。
  mutations: {
    // カウントアップするミューテーションを登録
    increment(state) {
      state.count++
    }
  }
})
 // exportすることでstoreインスタンスを使用することができます。
export default store

storeインスタンスを/src/main.jsに登録

現在の状態では、SFC（単一ファイルコンポーネント）ごとでstoreインスタンスを読み込む必要があります。Vuexではそのような手間を省くために、main.jsにstoreを登録することができます。

import Vue from 'vue'
import App from './App'
// ./store.jsをstoreとしてimport
import store from './store.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // render関数を使うため、templateレンダリングへの代替が行われ、templateは必要なくなる
  // components: { App },
  render: h => h(App),
  store, //storeを登録
})

render: h => h(App),

についてはこちらの記事がとても参考になりました。

src/App.vueで使用してみる

>>|javascript|

|

アロー関数によるインスタンスの参照方法について

先ほどstore.jsでmutationsに

  mutations: {
    // カウントアップするミューテーションを登録
    increment(state) {
      state.count++
    }
}

という書き方をしましたが、アロー関数で記述するとさらに簡易的に記述することが可能です。

  mutations: {
    // カウントアップするミューテーションを登録
    increment: state => { state.count++ }
}

参考

基礎から学ぶ Vue.js