Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/koheing/firex-store
vuex + firestore. you can read or write firestore data, easily
https://github.com/koheing/firex-store
firebase firestore npm-package nuxt typescript vue vuejs vuejs2 vuex
Last synced: 8 days ago
JSON representation
vuex + firestore. you can read or write firestore data, easily
- Host: GitHub
- URL: https://github.com/koheing/firex-store
- Owner: koheing
- License: mit
- Created: 2019-09-21T03:13:40.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T04:47:04.000Z (over 1 year ago)
- Last Synced: 2024-04-29T21:42:33.575Z (7 months ago)
- Topics: firebase, firestore, npm-package, nuxt, typescript, vue, vuejs, vuejs2, vuex
- Language: TypeScript
- Homepage:
- Size: 1.74 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# firex-store
[](LICENSE)
[](https://github.com/nor-ko-hi-jp/firex-store/issues)
- `If you use this npm, you can read and write firestore data in Vuex, easily.`
- It is inspired by [vuexfire](https://github.com/vuejs/vuefire)
- With this NPM, you can read and write Firestore data in Vuex like the following code
```js
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 } */)
}
}
}
```
```js
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
- [firex-store-sample](https://github.com/nor-ko-hi-jp/firex-store-sample)
## 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](https://github.com/nor-ko-hi-jp/stream-executor#helper-methods-and-those-descriptions-in-createstream-are) library.
## Usage
- If you'd like to know more, see [here](docs/v1/v1-usage.md), please
## Difference from v0
- If you'd like to know more, see [here](docs/v1/v1-difference-from-v0.md), please
## v0 Usage
- If you'd like to know more, see [here](docs/v0/v0-usage.md), please