Vue 앱에서 Firebase 사용 Vuefire 및 Vuexfire

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

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

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

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

지오포인트

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를 사용하여 Firebase 데이터베이스에서 데이터를 가져오고 설정하고 Vuex 저장소에 데이터베이스 상태를 저장할 수 있습니다.

이를 사용하기 위해 다음을 실행하여 필요한 패키지를 설치합니다.

yarn add vuex vuexfire vuefire firebase

또는

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 상태를 가져오는 getter가 있습니다.
App.vue 에서는 작업과 게터를 각각 메서드와 계산된 속성에 매핑합니다.

그렇게 한 후에 this.bindBooksRef 상태를 채우기 위해 메서드에 매핑한 books 작업을 호출할 수 있습니다.

그런 다음 템플릿에 books 데이터가 표시되어야 합니다.

결론

Vuefire를 사용하여 지리적 위치 및 타임스탬프 데이터를 추가할 수 있습니다.

또한 Vuexfire 라이브러리를 사용하면 Firebase 데이터베이스를 Vuex 스토어에 쉽게 바인딩할 수 있습니다.