Vuexfire can now be hijacked to inject custom models to the bound documents. In your store, add the mutations and customize them
Warning: This is hastily put together for a side project. Published on npm: @fredrikbergelin/vuefire @fredrikbergelin/vuexfire
Store:
import { walkSet } from '@fredrikbergelin/vuefire-core'
import Post from '@/models/Post' // Just an example
const VUEXFIRE_SET_VALUE = 'vuexfire/SET_VALUE' const VUEXFIRE_ARRAY_ADD = 'vuexfire/ARRAY_ADD' const VUEXFIRE_ARRAY_REMOVE = 'vuexfire/ARRAY_REMOVE' const VUEXFIRE_UPDATE = 'vuexfire/UPDATE'
Mutations:
[VUEXFIRE_SET_VALUE](state, { path, target, data }) { walkSet(target, path, data) },
[VUEXFIRE_ARRAY_ADD](state, { newIndex, data, target, collectionKey }) {
// Just an example, implement your own logic...
if (collectionKey === 'posts') { target.splice(newIndex, 0, new Post(data)) } else { target.splice(newIndex, 0, data) // Original implementation, keep only this if you want a blank slate } },
[VUEXFIRE_UPDATE]( state, { oldIndex, newIndex, data, target, collectionKey } ) { this.commit(VUEXFIRE_ARRAY_REMOVE, { oldIndex, target }) this.commit(VUEXFIRE_ARRAY_ADD, { newIndex, data, target, collectionKey }) },
[VUEXFIRE_ARRAY_REMOVE](state, { oldIndex, target }) { return target.splice(oldIndex, 1)[0] },
// That's all
Synchronize your data and Firebase Cloud Store database in real-time
Note: This version currently supports Vue 2 and Firebase 7. Support for Vue 3 / Composition API and Firebase 8 is on the way.