Использование Firebase в приложении Vue с Vuexfire - отмена привязки и географические точки

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

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

Развязывание

Мы можем остановить синхронизацию состояния коллекции или документа с нашим хранилищем Vuex с помощью метода unbindFirestoreRef.

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

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 };

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"));
    }),
    unbindBooksRef: firestoreAction(({ unbindFirestoreRef }) => {
      unbindFirestoreRef("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>

Мы добавили действие unbindBookRef, которое вызывает unbindFirestoreRef со строкой имени коллекции.

По умолчанию, когда мы отвязываем коллекцию, состояние хранилища Vuex сбрасывается до исходного значения.

unbindFirestoreRef(“books”); совпадает с unbindFirestoreRef(“books”, true);.

Если мы не хотим, чтобы состояние сбрасывалось при отмене привязки, мы можем передать false в качестве второго аргумента:

unbindFirestoreRef("books", false);

Мы также можем сбросить состояние до значения, которое мы хотим, если мы передадим функцию, которая возвращает значение, которое мы хотим сбросить до:

unbindFirestoreRef('books', () => [{ title: 'foo' }])

Если мы сбросим документ, он будет сброшен на null:

unbindFirestoreRef('book')

Геоточки

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

Это доступно только в Cloud Firestore.

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

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: {
    cities: []
  },
  mutations: {
    ...vuexfireMutations
  },
  actions: {
    bindCitiesRef: firestoreAction((context) => {
      return context.bindFirestoreRef("cities", db.collection("cities"));
    })
  },
  getters: {
    cities: (state) => {
      return state.cities;
    }
  }
});
new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
  <div>{{cities}}</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { db, GeoPoint } from "./db";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions(["bindCitiesRef"])
  },
  computed: {
    ...mapGetters(["cities"])
  },
  async mounted() {
    this.bindCitiesRef();
    await db.collection("cities").add({
      name: "Paris",
      location: new GeoPoint(48.9, 2.3)
    });
  }
};
</script>

Мы просто вызываем add, чтобы добавить запись в нашу коллекцию Firestore.

Конструктор GeoPoint возвращает объект со свойствами latitude и longitude.

Это также аргументы конструктора.

Поскольку мы вызвали метод bindCitiesRef, документы коллекции автоматически синхронизируются с Vuex Store.

И мы вызвали mapGetters, чтобы сопоставить cities геттер с нашим компонентом, так что мы увидим документы в нашем шаблоне.

Заключение

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

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