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: