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 생성자는 latitudelongitude 속성이 있는 개체를 반환합니다.

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

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

결론



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

좋은 웹페이지 즐겨찾기