firex-store
v1.6.4
Published
Subscribe and write firestore data, easily
Downloads
65
Maintainers
Readme
firex-store
If you use this npm, you can read and write firestore data in Vuex, easily.
- It is inspired by vuexfire
- With this NPM, you can read and write Firestore data in Vuex like the following code
import { to, from, on, firestoreMutations, bindTo, map } from 'firex-store'
import { Model } from '~/model'
import { firestore } from '~/plugins/firebase'
// Vuex module
export default {
state: {
comments: [],
isLoaded: false
},
mutations: {
...firestoreMutations('collection'),
// ...firestoreMutations('all')
setIsLoaded: (state, isLast) => {
state.isLoaded = isLast
}
},
actions: {
streamSubscribe: ({ state, commit }) => {
const toComment = (data) => new Model(...data)
const ref = firestore.collection('comments')
// write code like Rxjs
from(ref)
.pipe(
map(toComment), // option
bindTo('comments'), // required
(({ isLast }) => commit('setIsLoaded', isLast)) // option
)
.subscribe(state, commit /*, { errorHandler, complectionHandler } */)
},
subscribe: ({ state, commit }) => {
const ref = firestore.collection('comments')
from(ref)
.mapOf(Model) // options. Model.fromJson called
.bindTo('comments')
.subscribe(state, commit, /* { errorHandler, complectionHandler, afterMutationCalled } */)
},
subscribeOnce: async ({ commit }) => {
const ref = firestore.collection('comments')
await from(ref)
.mapOf(Model) // options. Model.fromJson called
.bindTo('comments')
.subscribeOnce(commit, /* { errorHandler, complectionHandler, afterMutationCalled } */)
}
unsubscribe: ({ state }) => {
on('comments').unsubscribe(state)
},
find: async (_, { commentId }) => {
const ref = firestore.collection('comments').doc(commentId)
result = await from(ref)
.once()
.mapOf(Model) // options. Model.fromJson called
.find(/* { errorHandler, completionHandler } */)
return result
},
add: (_, { data }) => {
const ref = firestore.collection('comments')
return to(ref)
.mapOf(Model) // options. Model.toJson called
.add(data, /* { errorHandler, completionHandler } */)
},
set: (_, { data, commentId }) => {
const ref = firestore.collection('comments').doc(commentId)
return to(ref)
.mapOf(Model) // options. Model.toJson called
.transaction() // options
.set(data, /* { errorHandler, completionHandler } */)
},
mergeSet: (_, { data, commentId }) => {
const ref = firestore.collection('comments').doc(commentId)
return to(ref)
.mapOf(Model) // options. Model.toJson called
.transaction() // options
.mergeSet(data, /* { errorHandler, completionHandler } */)
},
delete: (_) => {
const ref = firestore.collection('comments').doc('commentId')
return to(ref)
.transaction() // options
.delete(/* { errorHandler, completionHandler } */)
}
}
}
import { FirestoreMapper } from 'firex-store'
class Model extends FirestoreMapper {
static fromJson(data) {
return new Model(data.id, `${data.family_name} ${data.first_name}` )
}
static toJson(data) {
return { id: data.id, family_name: data.fullName.split(' ')[0], first_name: data.fullName.split(' ')[1] }
}
construnctor(id, fullName) {
this.id = id
this.fullName = fullName
}
}
Installation
npm install --save firex-store
Example
Important
Return values or state values bound to Firestore has
docId
(documentId in Firestore) property.A state in store cannot subscribe to more than one 'collection' and 'document'
If you'd like to subscribe again after unsubscribing 'collection', set the property of the store you'd like to subscribe to
[]
and then subscribe.If you'd like to use helper method in pipe function, use stream-executor library.
Usage
- If you'd like to know more, see here, please
Difference from v0
- If you'd like to know more, see here, please
v0 Usage
- If you'd like to know more, see here, please