Firebase est l’un des moyens les plus simples de mettre en place une base de données hébergée en temps réel. VueFire rend la vie encore plus facile en fournissant un mappage direct et des mises à jour aux objets Firebase par le biais du système de réactivité de Vue. Combiné, le résultat est merveilleusement simple et clair.
C'est quoi Firebase ?
Firebase est un Backend-as-a-Service (Baas). Il fournit aux développeurs une variété d’outils et de services pour les aider à développer des applications de qualité, à accroître leur base d’utilisateurs et à réaliser des bénéfices. Il est construit sur l’infrastructure de Google.
Firebase est classé comme un programme de base de données NoSQL, qui stocke les données dans des documents de type JSON.
Ajouter Firebase à mon application Vue JS
Installez firebase et vuefire dans votre projet Vue.js, via NPM ou Yarn.
yarn add firebase vuefirenpm install firebase vuefire --saveEnsuite, dans le fichier principal de votre application, activez le plugin VueFire.
import './firebase';
import Vue from 'vue';
import VueFire from 'vuefire';
import App from 'App.vue';
Vue.use(VueFire);
new Vue({
el: '#app',
render: h => h(App)
});Nous devons également initier la connexion Firebase. Créez un nouveau fichier appelé firebase.js.
import Firebase from 'firebase'
const firebaseApp = Firebase.initializeApp({
// Remplissez vos données de configuration firebase ici.
...
});
// Exportez la base de données pour que les composants puissent l'utiliser.
export const db = firebaseApp.database();Maintenant, nous pouvons accéder aux données de notre base de données Firebase directement à partir des composants Vue.
<template>
<p v-for="user of users">
{{user.name}}
</p>
</template>
<script>
import {db} from './firebase';
export default {
data() {
return {
users: {}
}
},
firebase: {
users: {
source: db.ref('users'),
// Facultatif, permet de gérer les erreurs éventuelles.
cancelCallback(err) {
console.error(err);
}
}
}
}
</script>Chaque fois que la collection des utilisateurs est mise à jour, l’objet de données des utilisateurs est également mis à jour sur le client. C’est une base de données réactive et transparente, non ?
Modifier les données
Vous pouvez modifier les tableaux normalement dans this.$firebaseRefs, par exemple : this.$firebaseRefs.users.push({nom : ‘John Doe’}).
Les règles normales de réactivité de Vue et les avertissements s’appliquent.
Malheureusement, la modification des objets peut être un peu plus délicate. Cela doit être fait assez manuellement en utilisant directement la référence firebase.
updateUserName(user, newName) {
this.$firebaseRefs.users.child(user['.key']).child('name').set(newName);
}
removeUser(user) {
this.$firebaseRefs.users.child(user['.key']).remove()
}Vous pouvez trouver plus d’informations et de documentation dans le dépôt github de VueFire et le site de Firebase.
