Nuxt.js (SSR) vuexfire の組み合わせ

困って居ること

pages の asyncData or fetch のメソッド内で、 store.dispatch('bindXxx')
を実行して bindさせたいですが、期待通り動作しません
サーバ側で、bind は出来無いでしょうか?

js
1  bindXxx: firebaseAction(async ({bindFirebaseRef}) => {
2    await bindFirebaseRef('foo', xxxRef)
3  }),

気になる点

created メソッド内だと期待通りの動作です。
vuexfire のgithubでは、 SSR の言葉が何回が出てくるのですが...
worker などの兼ね合いからつらいか...

行動規範の内容に同意します

回答1件

ベストアンサー

vuexfireはどうも思うように動作しないことが多いですね

ですので私の場合は
pluginファイルでグローバルレベルに登録しています。

import
1import firebase from 'firebase/app'
2import 'firebase/firestore'
3
4if(!firebase.apps.length){
5  firebase.initializeApp({
6    apiKey: "",
7    authDomain: "",
8    databaseURL: "",
9    projectId: "",
10    storageBucket: "",
11    messagingSenderId: ""
12  })
13}
14
15const db = firebase.firestore()
16db.settings({ timestampsInSnapshots: true })
17
18export default ({ app, store }, inject) => {
19  app.$db = db
20  store.db = db
21}
22

storeの方はデータのアップデート用
appの方はデータの取得用で
下記のようにasyncDataでデータを取得できます。

async asyncData({app}){
  const userList = []
  await app.$db.collection('Users').orderBy('age','asc').get()
  .then((snap) =>{
    snap.forEach(item => {
      userList.push(item.data())
    })
  })
  return {
    userList: userList
  }
}

template html内はこんな感じです。

<template lang="html">

  <section class="index">
    <h1>index Component</h1>
    <ul>
      <li v-for="(user, userIndex) in userList" :key="userIndex">
        <nuxt-link :to="`/user/${user.name}`">{{user.name}}</nuxt-link>
      </li>
    </ul>
  </section>

</template>

投稿2018/11/22 06:33