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 데이터베이스 조작에 대한 지원을 추가하는 방법을 살펴보겠습니다.

데이터베이스 쿼리

데이터베이스를 쿼리하고 Vuexfire를 사용하여 Vuex 저장소와 동기화할 수 있습니다.

정렬

Firebase 데이터베이스에서 가져온 데이터를 정렬하기 위해 orderBy를 호출하여 데이터를 정렬할 수 있습니다.
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")
      );
    })
  },
  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>

bindBookRef 작업에서 bindFirestoreRef 상태를 books 데이터베이스 컬렉션에 바인딩하기 위해 books 메서드를 호출했습니다.
orderBy 메서드는 title 필드 값을 내림차순으로 정렬합니다.

그런 다음 state.books는 books가 내림차순으로 정렬된 title 객체의 배열을 반환합니다.

getter를 계산된 속성에 매핑하기 위해 mapGetters를 호출했기 때문에 이것이 템플릿에 표시되는 것을 볼 수 있습니다.

필터링

where 메서드로 항목을 필터링할 수도 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.
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").where("wordCount", ">", 200)
      );
    })
  },
  getters: {
    books: (state) => {
      return state.books;
    }
  }
});

new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");

200보다 큰 where 문서만 반환하기 위해 wordCount를 호출했습니다.

그러면 이것이 state와 getter에서 보게 될 것입니다.

데이터베이스에 쓰기

Firebase 데이터베이스에 쓰려면 Firebase SDK를 사용해야 합니다.

예를 들어 다음과 같이 작성할 수 있습니다.
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: [],
    book: {}
  },
  mutations: {
    ...vuexfireMutations
  },
  actions: {
    bindBooksRef: firestoreAction((context) => {
      return context.bindFirestoreRef("books", db.collection("books"));
    }),

    updateBook: firestoreAction(async ({ state }, { bookId, title }) => {
      const bookSnapshot = await db.collection("books").doc(bookId).get();
      const book = bookSnapshot.data();
      const newBook = { ...book, title };
      await db.collection("books").doc(bookId).set(newBook);
      console.log("book updated");
    })
  },
  getters: {
    books: (state) => {
      return state.books;
    }
  }
});

new Vue({
  store,
  render: (h) => h(App)
}).$mount("#app");

App.vue

<template>
  <div>
    <button @click="updateBook">update book</button>
    <div>{{books}}</div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions(["bindBooksRef"]),
    updateBook() {
      this.$store.dispatch("updateBook", {
        bookId: "ei4jIGJjcmS7eSRKUxsw",
        title: "baz"
      });
    }
  },
  computed: {
    ...mapGetters(["books"])
  },
  mounted() {
    this.bindBooksRef();
  }
};
</script>

Vuex 스토어에는 updateBook 작업을 통해 업데이트하려는 책을 bookId  으로 가져올 수 있습니다.

그리고 우리는 그것으로 title를 업데이트하고 싶습니다.

이를 위해 books 메서드를 사용하여 collection 컬렉션을 얻습니다.
doc ID로 문서를 가져옵니다.
get 쿼리 결과의 스냅샷을 가져옵니다.

그런 다음 data 메서드가 실제 데이터를 반환합니다.

그렇게 하면 title 객체를 생성하여 newBook를 업데이트합니다.

그리고 일단 그렇게 하면 문서를 업데이트하기 위해 set를 호출합니다.
App 구성 요소에서 dispatch 메서드에서 updateBook를 호출하여 updateBook Vuex 저장소 작업을 전달하여 업데이트를 수행합니다.
bindFirestoreRef를 사용하여 컬렉션과 스토어 상태를 동기화하므로 업데이트된 항목이 자동으로 표시되어야 합니다.

결론

Firebase SDK의 메서드를 사용하여 데이터를 업데이트할 수 있습니다.

비동기식이므로 코드를 작업에 넣어야 합니다.

또한 컬렉션을 상태에 바인딩할 때 항목을 정렬하고 필터링할 수 있습니다.