Vuex + Firebaseでのデータ取得

Question

前提・実現したいこと

nuxt.jsを利用したページでfirebaseと連携させてデータを表示しようしています。
その際に使ったライブラリはvuexfire2.3.1, firebase5.7です。

vuexはモジュールモードで実装しております。
nuxt.config.jsにはfirebaseのパスを記述済みです。

発生している問題・エラーメッセージ

source.once is not a function

該当のソースコード

plugins/firebase.js

import config from '~/config';
import firebase from 'firebase';

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

const db = firebase.firestore();
const settings = { timestampsInSnapshots: true };
db.settings(settings);

export { db };

store/index.js

import { firebaseMutations } from 'vuexfire';

export const mutations = {
  ...firebaseMutations
};

store/item.js

import { firebaseAction } from 'vuexfire';
import { db } from '~/plugins/firebase';
var itemRef = db.collection('item');

//...略 state等

/*
 ** Actions
 */
export const actions = {
  setItemsRef: firebaseAction(({ bindFirebaseRef }) => {
    bindFirebaseRef('items', itemRef);
  })
};
...

pages/item.vue

import { mapGetters, mapActions } from 'vuex';
// ...略
  created() {
    this.setItems();
  },
  methods: {
    ...mapActions({
      setItems: 'item/setItemsRef'
    }),
  }
...

試したこと

vuexfireのexampleで当該firestoreに接続してデータを取得できているのは確認しております。
エラーメッセージで調べましたが似たような症例がなくお手上げ状態なので知恵を貸してもらえればと思います..

Comments

[shou6]

source.once is not a functionというエラーはどの部分で出ているのでしょうか？

ファイル名とかあるかと思うので、それもあるかと良いと思います。

[hiro_ns]

追記ありがとうございます！
コンソールにでてたエラーはこんな感じでした
バージョンが低かったようで出ていたエラーのようでした。
app.js:286 TypeError: source.once is not a function
at bindAsArray (vendors.app.js:70742)
at bind (vendors.app.js:70849)
at context.bindFirebaseRef (vendors.app.js:70890)
at app.js:4209
at Store.firebaseEnhancedActionFn (vendors.app.js:70893)
at Array.wrappedActionHandler (commons.app.js:17836)
at Store.dispatch (commons.app.js:17558)
at Store.boundDispatch [as dispatch] (commons.app.js:17464)
at VueComponent.mappedAction (commons.app.js:18012)
at VueComponent.created (quiz.js:675)

[shou6]

解決された様で良かったです。

Answer 1

npm i vuexfire@nextで更新かけたらこのエラーは解消されました。