Использование Firebase в приложении Vue Vuefire и Vuexfire

Библиотека Vuefire позволяет нам добавлять возможности управления базой данных Firebase прямо из нашего приложения Vue.

В этой статье мы рассмотрим, как использовать Vuefire и Vuexfire, чтобы добавить поддержку управления базой данных Cloud Firestore в наше приложение Vue.

Геоточки

Мы можем добавить широту и долготу местоположения с помощью конструктора GeoPoint.

Это поддерживается только CloudFirestore.

Например, мы можем написать:

<template>
  <div>
    <button @click="add">add city</button>
    <div v-for="c of cities" :key="c.id">{{c}}</div>
  </div>
</template>
<script>
import { db, GeoPoint } from "./db";
export default {
  data() {
    return {
      cities: []
    };
  },
  mounted() {
    this.$bind("cities", db.collection("cities"));
  },
  methods: {
    async add() {
      await db.collection("cities").add({
        name: "London",
        location: new GeoPoint(51.3, 0)
      });
    }
  }
};
</script>

db.js

import firebase from "firebase/app";
import "firebase/firestore";
export const db = firebase
  .initializeApp({ projectId: "project-id" })
  .firestore();
const { Timestamp, GeoPoint } = firebase.firestore;
export { Timestamp, GeoPoint };

Мы вызвали метод add с экземпляром GeoPoint, чтобы сохранить широту и долготу местоположения.

Тогда у нас должно получиться что-то вроде:

{ "name": "London", "location": { "latitude": 51.3, "longitude": 0 } }

сохранены.

Отметки времени

Кроме того, мы можем сохранять временные метки с помощью Vuefire.

Мы используем метод Timestamp.fromDate для создания нашей отметки времени.

Например, мы можем написать:

<template>
  <div>
    <button @click="add">add event</button>
    <div v-for="e of events" :key="e.id">{{e}}</div>
  </div>
</template>
<script>
import { db, Timestamp } from "./db";
export default {
  data() {
    return {
      events: []
    };
  },
  mounted() {
    this.$bind("events", db.collection("events"));
  },
  methods: {
    async add() {
      await db.collection("events").add({
        name: "event",
        date: Timestamp.fromDate(new Date("2029-07-14"))
      });
    }
  }
};
</script>

Мы передали экземпляр Date в Timestamp.fromDate.

Тогда получаем что-то вроде:

{ "name": "event", "date": { "seconds": 1878681600, "nanoseconds": 0 } }

сохранено в результате.

Vuefire

Мы можем использовать Vuefire для получения и установки данных из базы данных Firebase и сохранения состояния базы данных в нашем магазине Vuex.

Чтобы использовать его, мы устанавливаем необходимые пакеты, запустив:

yarn add vuex vuexfire vuefire firebase

or

npm i vuex vuexfire vuefire firebase

Теперь мы можем создать наше хранилище Vuex и привязать его к базе данных Firebase, написав:

main.js

import Vue from "vue";
import App from "./App.vue";
import { firestorePlugin } from "vuefire";
import { vuexfireMutations, firestoreAction } from "vuexfire";
import Vuex from "vuex";
import { db } from "./db";
Vue.use(Vuex);
Vue.use(firestorePlugin);
Vue.config.productionTip = false;
const store = new Vuex.Store({
  state: {
    books: []
  },
  mutations: {
    ...vuexfireMutations
  },
  actions: {
    bindBooksRef: firestoreAction((context) => {
      return context.bindFirestoreRef("books", db.collection("books"));
    })
  },
  getters: {
    books: (state) => {
      return state.books;
    }
  }
});
new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
  <div>{{books}}</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions(["bindBooksRef"])
  },
  computed: {
    ...mapGetters(["books"])
  },
  mounted() {
    this.bindBooksRef();
  }
};
</script>

Как обычно, мы создаем наш магазин с конструктором Vuex.Store.

Но мы импортируем vuefireMutations и кладем в наш магазин.

Также наши действия создаются с помощью функции fireStoreAction.

И мы вызываем метод context.bindFirestoreRef, чтобы получить данные нашего магазина и установить их как состояние.

Первый аргумент - это имя состояния, а второй - это коллекция, которую мы хотим привязать к состоянию с заданным именем.

Также у нас есть геттер для получения состояния books.

В App.vue мы сопоставляем действия и геттеры с методами и вычисляемыми свойствами соответственно.

После этого мы можем вызвать действие this.bindBooksRef, которое мы сопоставили с методом заполнения состояния books.

Тогда наш шаблон должен показать books данные.

Заключение

Мы можем добавить данные о геолокации и отметках времени с помощью Vuefire.

Кроме того, библиотека Vuexfire позволяет нам легко привязать базу данных Firebase к нашему хранилищу Vuex.

Понравилась эта статья? Если да, то получите больше похожего контента, подписавшись на наш канал YouTube!