Дождаться загрузки firestore и положить во vuex?

Question

[Андрей]

Создал базу данных, коллекцию.
Как мне теперь использовать firestore "в стиле" REST API? Я подключил vuefire, но у него куча своей магии под капотом.

Мне же нужно ложить во vuex все записи из коллекции, плюс дожидаться загрузки (показывать loader). Так же нужно получать записи с query параметрами skip и limit (для пагинации), сортировать по дате, и получать быстрым запросом (аля count) количество всех записей в коллекции.

Answer 1

[Иван Лихоманов]

Удаляй костыль(vuefire).

В main.js

import firebase from 'firebase/app'
import 'firebase/firestore'

firebase.initializeApp({
    apiKey: "****************",
    authDomain: "****************",
    databaseURL: "****************",
    projectId: "****************",
    storageBucket: "****************",
    messagingSenderId: "****************",
    appId: "****************",
    measurementId: "****************",
});
export const db = firebase.firestore();

Компонент VUE:

import firebase from 'firebase/app';
import 'firebase/auth';
import {db} from '../main'

    export default {
        name: 'component-name',
        data() {
            return {
                loading: false
            }
        },
        methods: {
            fetchList() {
            this.loading = true;
            db.collection("collectionName").get()
                .then(function (querySnapshot) {
                    let list = {};
                    if (querySnapshot) {
                        querySnapshot.forEach(function (doc) {
                            // console.log(doc.id, " => ", doc.data());
                            list[doc.id] = doc.data();
                        });
                    }
                    console.log('Результат: ', list)
                })
                .catch(function (error) {
                    console.log("Error getting documents: ", error);
                }).finally(() => {
                this.loading = false;
            });
        },
        },
        mounted() {
           this.fetchList();
        }
    }