The Vuefire library lets us add Firebase database manipulation capabilities right from our Vue app.
In this article, we’ll look at how to use Vuefire and Vuexfire to add support for Cloud Firestore database manipulation into our Vue app.
We can query the database and synchronize it with the Vuex store with Vuexfire.
To sort the data that we get from the Firebase database, we can call orderBy
to sort the data.
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>
#programming #technology #javascript