Użycie firestorm w VUE

0

Witam, jak wygląda poprawny kod pobierający coś z firestorm? Czytałem różne poradniki (teraz ten: https://vuefire.vuejs.org/vuefire/binding-subscriptions.html#declarative-binding), ale ja mam już połączonego firebase więc wygląda to trochę inaczej, jak to zrobić żeby działało?

main.js

import firebase from 'firebase/app';
import { firestorePlugin } from 'vuefire';
import Vue from 'vue';
import VueMaterial from 'vue-material';
import App from './App.vue';
import router from './router';
import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css';
// import 'vue-material/dist/theme/default-dark.css';


Vue.config.productionTip = false;

let app = '';

const firebaseConfig = {
  apiKey: 'AIzaSyAixS2iMaChQ70gQeFDecllrQ_30yvAqbk',
  authDomain: 'demonewabse.firebaseapp.com',
  databaseURL: 'https://demonewabse.firebaseio.com',
  projectId: 'demonewabse',
  storageBucket: '',
  messagingSenderId: '407124353038',
  appId: '1:407124353038:web:315469cd9769b573',
};

firebase.initializeApp(firebaseConfig);

Vue.use(VueMaterial);

firebase.auth().onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      render: h => h(App),
    }).$mount('#app');
  }
});

Vue.material = {
  ripple: true,
  theming: {},
  locale: {
    dateFormat: 'dd/MM/yyyy',
    startYear: 1939,
    endYear: 2099,
    firstDayOfAWeek: 1,
    days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
    shortDays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
    shorterDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
    months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
    shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
    shorterMonths: ['J', 'F', 'M', 'A', 'M', 'Ju', 'Ju', 'A', 'Se', 'O', 'N', 'D'],
  },
};

Vue.use(firestorePlugin);

db.js

import firebase from 'firebase';
// Get a Firestore instance
export const db = firebase
  .initializeApp({ projectId: '(default)' })
  .firestore()

// Export types that exists in Firestore
// This is not always necessary, but it's used in other examples
const { TimeStamp, GeoPoint } = firebase.firestore
export { TimeStamp, GeoPoint }

notepad.vue

<template>
  <div>
    <md-field>
      <label>Personal Notepad (saved automatically)</label>
      <md-textarea v-model="textarea"></md-textarea>
    </md-field>
  </div>
</template>

<script>
import firebase from 'firebase';
import { db } from '@/db';

export default {
  name: 'notepad',
  data() {
    return {
      textarea: '',
      documents: [],
    };
  },
  methods: {

  },
  firestore: {
    documents: db.collection('documents'),
  },
};
</script>

<style lang="scss" scoped>

</style>

błąd:
screenshot-20190720190500.png

0

Chyba niepotrzebnie robisz 2x initializeApp, wystarczy raz.

0

@Markuz: to już sprawdzałem:

db.js

import firebase from 'firebase';
// Get a Firestore instance
export const db = firebase
  // .initializeApp({ projectId: '(default)' })
  .firestore()

// Export types that exists in Firestore
// This is not always necessary, but it's used in other examples
const { TimeStamp, GeoPoint } = firebase.firestore
export { TimeStamp, GeoPoint }

a błąd jest teraz inny:

screenshot-20190720191926.png

0

Nikt nie ma pomysłu?

1 użytkowników online, w tym zalogowanych: 0, gości: 1