Vuexfire 와 함께 Vue 앱에서 Firebase 사용 -  문서 및 현재 타임스탬프 추가

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

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

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

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

컬렉션에 문서 추가

add 메서드를 사용하여 컬렉션에 문서를 추가할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
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").orderBy("title", "desc")
      );
    }),
    addBook: firestoreAction(async ({ state }, book) => {
      await db.collection("books").add(book);
      console.log("book added");
    })
  },
  getters: {
    books: (state) => {
      return state.books;
    }
  }
});
new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <button @click="addBook">add book</button>
    <div>{{books}}</div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions(["bindBooksRef"]),
    addBook() {
      this.$store.dispatch("addBook", { title: "qux" });
    }
  },
  computed: {
    ...mapGetters(["books"])
  },
  mounted() {
    this.bindBooksRef();
  }
};
</script>

FirebasebindBookRef 컬렉션을 books 상태와 동기화하는 books 작업이 있습니다.

또한 addBook 개체를 add 컬렉션에 추가하기 위해 book를 호출하는 books 작업이 있습니다.

그런 다음 App.vue  에서 this.$store.dispatch 메서드를 호출하여 추가하려는 개체와 함께 addBook 작업을 전달합니다.

버튼을 클릭하면 버튼이 addBook 메서드를 실행합니다.

따라서 클릭하면 항목이 추가됩니다.

현재 타임스탬프

생성 또는 업데이트 시 현재 타임스탬프를 추가할 수 있습니다.

그렇게 하려면 firebase.firestore.FieldValue.serverTimestamp 메서드를 사용할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
App.vue

<template>
  <div>
    <button @click="addBook">add book</button>
    <div>{{books}}</div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import firebase from "firebase/app";

export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions(["bindBooksRef"]),
    addBook() {
      this.$store.dispatch("addBook", {
        title: "qux",
        createdAt: firebase.firestore.FieldValue.serverTimestamp()
      });
    }
  },
  computed: {
    ...mapGetters(["books"])
  },
  mounted() {
    this.bindBooksRef();
  }
};
</script>

타임 스탬프를 추가하려는 모든 곳에서 사용합니다.

그러면 다음과 같이 됩니다.

{ "createdAt": { "seconds": 1598895154, "nanoseconds": 675000000 }, "title": "qux" }

books 컬렉션에 추가되었습니다.

결론

Vuexfire는 Vue 앱과 Firebase로 문서와 현재 타임스탬프를 추가하는 방법을 제공합니다.