Vuexfire 와 함께 Vue 앱에서 Firebase 사용하기— Unbinding 및 Geopoints
5331 단어 vueprogrammingjavascriptwebdev
지금 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
인스턴스를 추가하고 업데이트를 즉시 확인할 수 있습니다.
Reference
이 문제에 관하여(Vuexfire 와 함께 Vue 앱에서 Firebase 사용하기— Unbinding 및 Geopoints), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/using-firebase-in-a-vue-app-with-vuexfire-unbinding-and-geopoints-1o2a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)