Введение в компоновку Vue3 Firebase с Ionic Framework

Firebase прошла долгий путь, и ИМХО API стало намного проще интегрировать в ваши приложения даже без сторонних библиотек. Я хотел снять видео об интеграции vuefire и, немного покопавшись, решил сначала начать с основ, а затем, возможно, позже показать интеграцию vuefire.

Весь проект представляет собой простое приложение списка/деталей на VueJS и Ionic Framework. Мы отображаем список, вы можете потянуть, чтобы обновить, и вы можете щелкнуть элемент списка, чтобы перейти на страницу сведений и загрузить пользователя.

Для сообщения в блоге я просматриваю firebaseService, который мы создаем для доступа к данным; Ионные компоненты рассматриваются в видео, ссылка на которое приведена ниже.

Настройте базовый импорт vue и firebase

import { onMounted, ref } from "vue";
// FIREBASE
import firebase from "firebase/app";
import "firebase/firestore";
const db = firebase
  .initializeApp({ projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID })
  .firestore();

Определите свойства, доступные для каждого экземпляра службы. Обратите внимание, что они находятся за пределами определения функции.

// define the user collection once
const userCollection = db.collection("users");
// hold the users retrieved from the database
const users = ref<any>([]);
// any error from firebase call
const error = ref<any>(null);
// when we are loading
const loading = ref<any>(false);

Давайте определим составные и исходные свойства, которые мы будем возвращать.

export default () => {
  return {
    //properties
    users,
    loading,
    error,
  };
}

Получение всех пользователей

Чтобы получить всех пользователей из firestore, мы можем запросить коллекцию. Это функция, которую нужно вызывать, используя созданную нами константу коллекции.

const getCollectionData = async (collection: any) => {
    loading.value = true;
    try {
      const querySnapshot = await collection.get();
      const results = querySnapshot.docs.map((doc: any) => {
        return { ...doc.data(), id: doc.id };
      });
      loading.value = false;
      return results;
    } catch (e) {
      error.value = e;
      loading.value = false;
    }
  };

Поскольку мы будем вызывать функцию несколько раз, onMounted также используется при обновлении базы данных, я создал вспомогательную функцию.

export default () => {
  const getCollectionData = async (collection: any) => {
    loading.value = true;
    try {
      const querySnapshot = await collection.get();
      const results = querySnapshot.docs.map((doc: any) => {
        return { ...doc.data(), id: doc.id };
      });
      loading.value = false;
      return results;
    } catch (e) {
      error.value = e;
      loading.value = false;
    }
  };
  // helper
  const loadUsers = async () => {
    users.value = await getCollectionData(userCollection);
  };
  // when initialized, get all the users
  onMounted(async () => {
    await loadUsers();
  });
  return {
    // functions
    loadUsers,
    //properties
    users,
    loading,
    error,
  };
};

Получение конкретного пользователя

Есть два способа получить конкретного пользователя: из локального массива/кэша users или снова вызвать базу данных firestore.

/**
   * get the user from the local array
   * @param userId
   */
  const getLocalUser = (userId: string) => {
    return users.value.find((u: any) => u.id === userId);
  };

Если мы хотим получить данные из базы данных

/**
   * get the document from firebase and not local users
   * 
   * @param collection 
   * @param id 
   */
  const getCollectionDoc = async (collection: any, id: string) => {
    loading.value = true;
    try {
      const doc = await collection.doc(id).get();
      loading.value = false;
      return { ...doc.data(), id: doc.id };
    } catch (e) {
      error.value = e;
      loading.value = false;
    }
  };

чтобы сделать эту функцию более доступной, мы добавили вспомогательную функцию в

getUser : (id: string) => getCollectionDoc(userCollection,id),

Заворачивать

Это был просто краткий обзор кода для компоновки firebase; Более подробная информация и пояснения приведены в видео на @youtube, прикрепленном ниже.

Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии здесь или под видео.

Это исходный код проекта, который я выполняю в процессе разработки firebase, компонуемого для доступа к коллекциям и документам.

Список воспроизведения видео Ionic VueJS