QuasarFramework+Firebaseに、Vuexを加えて、ユーザ情報をstoreで管理をする機能を追加します。

前提条件・環境

macOS High Sierra 10.13.2
npmがinstallされている

参考

公式ドキュメント
https://vuex.vuejs.org/ja/intro.html
以下の記事の続きです。
https://qiita.com/yassyskywalker/items/d74ea3b0834145df5473

Vuexとは？

公式サイトによると、「Vue.js アプリケーションのための状態管理パターン + ライブラリです。」とのことですが、要は、どのコンポーネントからでもアクセスできる共通のグローバル変数を設定して、双方向バインディングを実現するというイメージに近い気がします。詳しくは公式サイトをご参照くださいませ。
https://vuex.vuejs.org/ja/intro.html

QuasarFramework + Firebaseでログイン認証機能を実装する

以下の記事に従ってログイン認証機能を実装しています。
https://qiita.com/yassyskywalker/items/d74ea3b0834145df5473

Vuexを導入する

Vuexをinstallする

npm install vuex --save

src/storeフォルダを作成 && src/store内にstore.jsファイルを作成する。

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

main.js にstoreをimportする。

main.js

...
import { store } from './store/store.js'
...
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

src/store/modulesフォルダを作成 && modules/users.jsファイルを作成

users.js

const state = {
  currentUser: null
}

const getters = {
  currentUser: state => state.currentUser
}

const mutations = {
  userStatus (state, user) {
    if (user) {
      state.currentUser = user.email
    }
    else {
      state.currentUser = null
    }
  }
}

const actions = {
  setUser ({ commit }, user) {
    commit('userStatus', user)
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

main.jsに、Auth状態が変更になったときに、storeのcurrentUser情報を更新するコードを追記する。

main.js

...
let app
firebase.auth().onAuthStateChanged(function (user) {
  // Auth状態が変更したときに、storeの状態も同時に更新する
  if (user) {
    store.dispatch('setUser', user)
  }
  else {
    store.dispatch('setUser', null)
  }
  Quasar.start(() => {
    if (!app) {
      /* eslint-disable no-new */
      app = new Vue({
        el: '#q-app',
        router,
        store,
        render: h => h(require('./App').default)
      })
    }
  })
})

Hello.vueにcurrentUserが取得できているか確認するコードを追記します。

Hello.vue

...
<q-toolbar-title>
  Quasar App {{ currentUser }}
  <div slot="subtitle">Running on Quasar v{{$q.version}}</div>
</q-toolbar-title>
...
<script>
...
computed: {
...
  currentUser () {
    return this.$store.getters.currentUser
  }
},
...
</script>

指定した位置にユーザー情報が表示されていれば成功です！

まとめ

Vuexは、日本語のドキュメントが充実しているおかげもあって、学習コストもそこまで高く無いと思いますので、Vue.jsを使うときはセットで使いたいですね。

Quasar Framework + Firebase に、Vuexを導入してみる。