Vue.jsでPWAを作ってみる - Vuexの導入 -

Vue.jsでPWAを作ってみる - Vuexの導入 -

前回はプロジェクト作成まで実施して、実装に入ろうと考えたが、状態管理のためにVuexを導入しようと思います。
使用したPWAテンプレート（vue-pwa-boilerplate）には、Vuexがはいっていないので、導入するためには自分で実施する必要があります。

以前の記事

下記記事はモジュールシステムを使用していないため、今回の記事の内容とは使い方が若干異なります。
www.sky-limit-future.com

Vuexのインストール

今回はnpmを使ってインストールします。
以下のコマンドをターミナルで。

$ npm install vuex --save

これで使えるはずなので、早速Vueコンポーネントに取り入れていきましょう。

Vuexのインポート

修正前と修正後を比較します。

修正前

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

修正後

import Vue from 'vue'
import App from './App'
import router from './router'
// Vuexをインポートします。
import Vuex from 'vuex'

Vue.config.productionTip = false

/** vuex */
// Vuexの使用を宣言します。
Vue.use(Vuex)

// ここでは適当にstoreオブジェクトを作成します。
// 正しく導入できているか確かめるためです。
const store = new Vuex.Store({
	state: {	
		count: 0
	}
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store, // storeオブジェクトを追加します。
  template: '<App/>',
  components: { App }
})

①まずはVuexをインポートします。

import Vuex from 'vuex'

②次に、Vuexの使用を宣言します。

Vue.use(Vuex)

③storeオブジェクトを作成します。
ここでは例として、「count」という値を保持するようなオブジェクトを作成しました。

const store = new Vuex.Store({
	state: {	
		count: 0
	}
})

④最後に、Vueコンポーネントにstoreオブジェクトを追加します。

new Vue({
  el: '#app',
  router,
  store, // storeオブジェクトを追加します。
  template: '<App/>',
  components: { App }
})

ここまでで、どのコンポーネントからもVuexのstoreオブジェクトを参照・更新できるようになっているはずです。
それを確かめます。

Vuexを使う

Hello.vue内で、storeオブジェクトが参照できるかどうかを確認します。
computedを使用して、storeオブジェクト内のデータを参照します。

  computed : {
    getCount: function(){
      return this.$store.state.count
    }
  }

これを画面に表示してみます。
Hello.vueのtemplate内に、getCountの値を表示する箇所を記載します。

    <h1>{{getCount}}</h1>

表示結果

画面の一番下に大きく「０」と表示されています。
うまく参照できました。
参照できれば、更新もできるはずですが、今回はここまでにします。

更新などの実装は以前の記事をご覧ください。
www.sky-limit-future.com

または公式サイト
https://vuex.vuejs.org/ja/getting-started.html