Vuexfire 와 함께 Vue 앱에서 Firebase 사용하기— Unbinding 및 Geopoints

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Vuefire 라이브러리를 사용하면 Vue 앱에서 바로 Firebase 데이터베이스 조작 기능을 추가할 수 있습니다.

이 기사에서는 Vuefire 및 Vuexfire를 사용하여 Vue 앱에 Cloud Firestore 데이터베이스 조작 지원을 추가하는 방법을 살펴보겠습니다.

바인딩 해제

unbindFirestoreRef 메서드를 사용하여 컬렉션 또는 문서의 상태를 Vuex 저장소에 동기화하는 것을 중지할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
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')

지오포인트

GeoPoint 생성자를 사용하여 위치 정보 데이터를 Firebase 문서에 저장할 수 있습니다.

이는 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>

Firestore 컬렉션에 항목을 추가하기 위해 add를 호출하기만 하면 됩니다.
GeoPoint 생성자는 latitude 및 longitude 속성이 있는 개체를 반환합니다.

이것들은 또한 생성자의 인수입니다.
bindCitiesRef 메서드를 호출했기 때문에 컬렉션의 문서는 Vuex Store와 자동으로 동기화됩니다.

그리고 mapGetters getter를 컴포넌트에 매핑하기 위해 cities를 호출했으므로 템플릿에서 문서를 볼 수 있습니다.

결론

스토어에서 바인딩을 해제하고 컬렉션에 GeoPoint 인스턴스를 추가하고 업데이트를 즉시 확인할 수 있습니다.