The sky is the limit

ハイブリッドアプリ開発、PWAなど効率の良いiOSアプリ、Androidアプリ開発の情報を共有したい。アプリ開発は楽しい。【PWA、AngularJS、Monaca、Cordova、OnsenUI】

【Vue.js】勉強しながらVue.jsでPWAを作ってみる - Vuexの導入 -

【Vue.js】勉強しながらVue.jsでPWAを作ってみる - Vuexの導入 -

f:id:duo-taro100:20160218004611p:plain

前回はプロジェクト作成まで実施して、実装に入ろうと考えたが、状態管理のために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>

表示結果

f:id:duo-taro100:20171031154500p:plain

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

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


または公式サイト
Vuex 入門 · Vuex