# vuex-firebase > Sync Firebase Data to Vuex Latest version **0.3.2** (published 2017-03-14) · ISC license · 0 weekly downloads ## Install ```sh npm install vuex-firebase pnpm add vuex-firebase yarn add vuex-firebase bun add vuex-firebase ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.3.2 | | Published | 2017-03-14 | | First published | 2017-03-05 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 4 | | Author | Ralph Christian D. Eclipse | | Maintainers | ralphchristianeclipse | | Keywords | vuex, firebase, bind, sync | ## Links - npm: https://www.npmjs.com/package/vuex-firebase - Repository: https://github.com/ralphchristianeclipse/vuex-firebase - Homepage: https://github.com/ralphchristianeclipse/vuex-firebase#readme - Issues: https://github.com/ralphchristianeclipse/vuex-firebase/issues - npm.io page: https://npm.io/package/vuex-firebase ## Alternatives - [@commercetools/sync-actions](https://npm.io/package/@commercetools/sync-actions.md) — 25.1K weekly downloads - [cwait](https://npm.io/package/cwait.md) — 21.4K weekly downloads - [@ledgerhq/hw-app-cosmos](https://npm.io/package/@ledgerhq/hw-app-cosmos.md) — 4.2K weekly downloads - [@financial-times/o-loading](https://npm.io/package/@financial-times/o-loading.md) — 2.8K weekly downloads - [fa](https://npm.io/package/fa.md) — 185 weekly downloads ## Recent versions - 0.3.2 (latest) — 2017-03-14 - 0.3.1 — 2017-03-14 - 0.3.0 — 2017-03-14 - 0.2.0 — 2017-03-13 - 0.1.91 — 2017-03-09 - 0.1.9 — 2017-03-09 - 0.1.8 — 2017-03-07 - 0.1.7 — 2017-03-06 - 0.1.6 — 2017-03-06 - 0.1.5 — 2017-03-06 - 0.1.4 — 2017-03-06 - 0.1.3 — 2017-03-06 - 0.1.2 — 2017-03-06 - 0.1.1 — 2017-03-06 - 0.1.0 — 2017-03-06 - … 9 more at https://npm.io/package/vuex-firebase/versions ## README # vuex-firebase Sync Firebase Data to Vuex ### Installation npm install vuex-firebase --save ### Update Changed the scope of _key and _ref to _: { ref: '', key: '' } This change is for deleting purposes ### How to Use ```js import Vue from 'vue'; import Vuex from 'vuex'; import FireBase from 'firebase'; import VuexFirebase from 'vuex-firebase'; Vue.use(Vuex); let Store = { getters: { posts(state,getters) { return getters.$firebase('posts').data.map(post => { return { post, user: getters.users.find(({user}) => user._.key == post.user); } }); }, users(state,getters) { return getters.$firebase('users').data.map(user => { return { user } }) } } } let config = { //Firebase config } FireBase.initializeApp(config); const store = new Vuex.Store(Store); //pass your store object VuexFirebase(store,FireBase); //then use it on Vue Root new Vue({ el: '#app', store, data() { return { user: { _: { ref: 'users', time: true, // if you don't want a time stamp to be added hook: key => { //a hook for the key of the user object useful when you're adding by push and you want to chain it //add a post when a user is added let post = { _: { ref: 'posts' }, title: 'Welcome New User', body: 'Start binding vuex to firebase with VuexFirebase' user: key } } }, name: 'Ralph', age: 21 }, post: { _: { ref: 'posts', }, title: 'My New Post', body: 'This is a cool post', user: 'KEY' } } }, mounted() { // this will save the user on the 'users' node based on _ref value; this.$store.dispatch('VUEX_FIREBASE_SAVE',this.user); // will add the user by push key if no _key is specified inside the object this.$store.dispatch('VUEX_FIREBASE_SAVE',this.post); //passing it with a key will update or add the user on 'users 'node; this.$store.dispatch('VUEX_FIREBASE_SAVE',{...this.user,_.key: 'KEY'}); // same as this also this.user._.key = 'KEY'; this.$store.dispatch('VUEX_FIREBASE_SAVE',this.user); // passing only the _ will delete the user on 'users' node; this.$store.dispatch('VUEX_FIREBASE_SAVE',this.user._); } }) // You can use it here on initialization or dispatch in any vue component store.dispatch('VUEX_FIREBASE_BIND', { // also remember that the nodes will be sequentially listen so please put the main node to the upper par users: { // select the users node in firebase // this will listen to all the child_* events of the users node hooks: { added({index,record},store) { // added hook when child_added event is fired //index of the record in the array, //record is the snapshot containing _key as the snap.key and _ref as the source root "users" //store used for chaining mutations record.age += 1; store.dispatch('SOME_MUTATION',record); // or send the record to another mutation for other purposes // this will alter the record before storing it on the main data state }, changed({index,record},store) {}, // child_changed event hook, moved({index,record},store) {}, // child_moved event hook removed({index,record},store) { // child_removed event hook useful for cascade deleting or using with firebase storage deletions let posts = store.getters.posts.filter(({post}) =? post._.key == record._.key); posts.forEach(({post}) => { // must be equal to post object in getters.posts using object destructuring store.dispatch('VUEX_FIREBASE_SAVE',post._); // delete the posts owned by the user }) } } }, posts: {}, }), // You can also unbind it using store.dispatch('VUEX_FIREBASE_UNBIND',{ users: {}, // unbind both of this posts: {} }) ``` --- _Source: https://npm.io/package/vuex-firebase · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._