Ошибка получения схемы из Flamelink с использованием Firestore и VueJS, VuexFire - PullRequest
Новая
       100

Ошибка получения схемы из Flamelink с использованием Firestore и VueJS, VuexFire

0 голосов
/ 21 апреля 2020

Я пытаюсь получить контент из схемы, помеченной как «общая», которую я создал с помощью Flamelink Headless CMS с Firestore. Я использую Vue с Vuex, VuexFire. Я продолжаю сталкиваться с проблемами с возвратом обещания в разделе Действия моего магазина. Я работал над этим в течение последнего дня, и я не могу понять, как сделать эту работу.

Я получаю следующую ошибку: 

TypeError: document.onSnapshot is not a function
    at bindDocument (vuexfire.esm.js?3317:444)
    at eval (vuexfire.esm.js?3317:602)
    at new Promise (<anonymous>)
    at bind$1 (vuexfire.esm.js?3317:591)
    at bindFirestoreRef (vuexfire.esm.js?3317:643)
    at _callee$ (general.js?d886:51)
    at tryCatch (runtime.js?96cf:45)
    at Generator.invoke [as _invoke] (runtime.js?96cf:274)
    at Generator.prototype.<computed> [as next] (runtime.js?96cf:97)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3)

Вот мои файлы, так далеко:

пожарная база. js

import firebase from "firebase/app"
import 'firebase/firestore'
import flamelink from "flamelink/app";
import "flamelink/content";

const config = {
  apiKey: "xxx",
  authDomain: "xxx-x.x.com",
  databaseURL: "https://xxx-xxx.xxx.com",
  projectId: "xxx-xxx",
  storageBucket: "xxx-xxx.xxx.com",
  messagingSenderId: "xxx",
  appId: "1:xxx",
  measurementId: "G-xxx",
};

const firebaseApp = firebase.initializeApp(config);
//const db = firebase.firestore();
//export const dbGeneralRef = db.collection("general");

export const app = flamelink({
  firebaseApp, // required
  dbType: "cf", // can be either 'rtdb' or 'cf' for Realtime DB or Cloud Firestore
  env: "production", // optional, default shown
  locale: "en-US", // optional, default shown
  precache: true, // optional, default shown. Currently it only precaches "schemas" for better performance
});

general. js store 

import { firestoreAction } from "vuexfire";
import { app } from "../../firebase";

const state = {
  generalContent: []
};

const getters = {
  getGeneralContent:(state) => state.generalContent,
};

const mutations = {};

const actions = {
  setGeneralRef: firestoreAction(async({ bindFirestoreRef }) =>{
    const ref = await app.content.get({ schemaKey: "general" });
    // AWAIT and the wait: true options are important
    console.log('before',ref)
    await bindFirestoreRef("generalContent", ref, {wait:true});
  }),


};

export default {
  state,
  mutations,
  getters,
  actions,

};

Приложение. vue

<template>
  <b-container fluid>
        <app-header />
         <b-container class="home-wrapper" fluid>
            <Sidebar class="nav-bar"/>
            <router-view class="home"></router-view>
        </b-container>
  </b-container>
</template>

<script>
  import Header from './components/Header'
  import Sidebar from './components/Sidebar'
  import { app } from './firebase'


  export default {
  name: 'App',
  components: {
    appHeader: Header,
    Sidebar,

  },

 async fetch({ store }) {
   const ref = await app.content.get({ schemaKey: "general" });

    try {
      // ONLY NEEDED IF IN SSR (UNIVERSAL) MODE, not needed in SPA MODE
      // Binds it on server side, but will not rebind on client-side
      await store.dispatch('setGeneralRef',ref)
    } catch (e) {
      console.error(e)
    }
  },
  async created() {
       const ref = await app.content.get({ schemaKey: "general" });
      console.log(ref)
    try {
      // Binds it on client-side
      await this.$store.dispatch('setGeneralRef',ref)
    } catch (e) {
      console.error(e)
    }
  }
  }

</script>
...