{"id":15024604,"url":"https://github.com/ralphchristianeclipse/vuex-firebase","last_synced_at":"2025-04-12T06:36:37.794Z","repository":{"id":118000375,"uuid":"83941560","full_name":"ralphchristianeclipse/vuex-firebase","owner":"ralphchristianeclipse","description":"Sync Firebase Data to Vuex","archived":false,"fork":false,"pushed_at":"2017-03-14T14:41:32.000Z","size":31,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-10T21:38:17.950Z","etag":null,"topics":["firebase","sync-firebase-data","vuex","vuex-firebase"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ralphchristianeclipse.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-05T03:25:30.000Z","updated_at":"2021-08-04T06:15:47.000Z","dependencies_parsed_at":null,"dependency_job_id":"e1020abf-5aad-4d6d-8126-f179bfcab16d","html_url":"https://github.com/ralphchristianeclipse/vuex-firebase","commit_stats":{"total_commits":27,"total_committers":1,"mean_commits":27.0,"dds":0.0,"last_synced_commit":"6c2a2f9fc3018044b70f2fc6d35f1490cedb034f"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralphchristianeclipse%2Fvuex-firebase","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralphchristianeclipse%2Fvuex-firebase/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralphchristianeclipse%2Fvuex-firebase/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ralphchristianeclipse%2Fvuex-firebase/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ralphchristianeclipse","download_url":"https://codeload.github.com/ralphchristianeclipse/vuex-firebase/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248530544,"owners_count":21119589,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["firebase","sync-firebase-data","vuex","vuex-firebase"],"created_at":"2024-09-24T20:00:38.081Z","updated_at":"2025-04-12T06:36:37.773Z","avatar_url":"https://github.com/ralphchristianeclipse.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vuex-firebase\nSync Firebase Data to Vuex\n\n### Installation\n    npm install vuex-firebase --save\n    \n### Update\n    Changed the scope of _key and _ref to\n    _: {\n        ref: '',\n        key: ''\n    }\n    This change is for deleting purposes\n### How to Use\n\n```js\n    import Vue from 'vue';\n    import Vuex from 'vuex';\n    import FireBase from 'firebase';\n    import VuexFirebase from 'vuex-firebase';\n    Vue.use(Vuex);\n    \n    let Store = {\n        getters: {\n            posts(state,getters) {\n              return getters.$firebase('posts').data.map(post =\u003e {\n                return {\n                    post,\n                    user: getters.users.find(({user}) =\u003e user._.key == post.user);\n                } \n              });\n            },\n            users(state,getters) {\n                return getters.$firebase('users').data.map(user =\u003e {\n                    return {\n                        user\n                    }\n                })\n            }\n        }\n    }\n    let config = {\n        //Firebase config\n    }\n    FireBase.initializeApp(config);\n    const store = new Vuex.Store(Store); //pass your store object\n    \n    VuexFirebase(store,FireBase);\n    \n    //then use it on Vue Root\n    \n    new Vue({\n        el: '#app',\n        store,\n        data() {\n          return {\n              user: {\n                  _: {\n                    ref: 'users',\n                    time: true, // if you don't want a time stamp to be added\n                    hook: key =\u003e {\n                        //a hook for the key of the user object useful when you're adding by push and you want to chain it\n                        //add a post when a user is added\n                        let post = {\n                            _: {\n                                ref: 'posts'\n                            },\n                            title: 'Welcome New User',\n                            body: 'Start binding vuex to firebase with VuexFirebase'\n                            user: key\n                        }\n                    }\n                  },\n                  name: 'Ralph',\n                  age: 21\n              },\n              post: {\n                  _: {\n                    ref: 'posts',\n                  },\n                  title: 'My New Post',\n                  body: 'This is a cool post',\n                  user: 'KEY'\n              }\n          }  \n        },\n        mounted() {\n        \n            // this will save the user on the 'users' node based on _ref value;\n            this.$store.dispatch('VUEX_FIREBASE_SAVE',this.user);\n            // will add the user by push key if no _key is specified inside the object\n            this.$store.dispatch('VUEX_FIREBASE_SAVE',this.post);\n            \n            //passing it with a key will update or add the user on 'users 'node;\n            this.$store.dispatch('VUEX_FIREBASE_SAVE',{...this.user,_.key: 'KEY'});\n            // same as this also\n            this.user._.key = 'KEY';\n            this.$store.dispatch('VUEX_FIREBASE_SAVE',this.user);\n            \n            // passing only the _ will delete the user on 'users' node;\n            this.$store.dispatch('VUEX_FIREBASE_SAVE',this.user._);\n            \n        }\n    })\n    // You can use it here on initialization or dispatch in any vue component\n    store.dispatch('VUEX_FIREBASE_BIND', { // also remember that the nodes will be sequentially listen so please put the main node to the upper par\n        users: { // select the users node in firebase\n                 // this will listen to all the child_* events of the users node\n            hooks: {\n                added({index,record},store) { // added hook when child_added event is fired\n                    //index of the record in the array,\n                    //record is the snapshot containing _key as the snap.key and _ref as the source root \"users\"\n                    //store used for chaining mutations\n                    record.age += 1;\n                    store.dispatch('SOME_MUTATION',record); // or send the record to another mutation for other purposes\n                    // this will alter the record before storing it on the main data state\n                },\n                changed({index,record},store) {}, // child_changed event hook,\n                moved({index,record},store) {}, // child_moved event hook\n                removed({index,record},store) { // child_removed event hook useful for cascade deleting or using with firebase storage deletions\n                    let posts = store.getters.posts.filter(({post}) =? post._.key == record._.key);\n                    posts.forEach(({post}) =\u003e { // must be equal to post object in getters.posts using object destructuring\n                        store.dispatch('VUEX_FIREBASE_SAVE',post._); // delete the posts owned by the user\n                    })\n                } \n            }\n        },\n        posts: {},\n    }),\n    // You can also unbind it using\n    store.dispatch('VUEX_FIREBASE_UNBIND',{\n        users: {}, // unbind both of this\n        posts: {} \n    })\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fralphchristianeclipse%2Fvuex-firebase","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fralphchristianeclipse%2Fvuex-firebase","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fralphchristianeclipse%2Fvuex-firebase/lists"}