granipouss/firevuex

Vuex 2 binding for Firebase 3, strongly based on vuefire

FireVuex

Vuex 2 binding for Firebase 3, strongly based on vuefire.

Installation

1. If included as global <script>: the FireVuex will be available globally.

2. In module environments, e.g CommonJS:

npm i -S firevuex

and then next

const FireVuex = require('firevuex')

Usage

You may want to see the example to have a preview of usage.

const app = firebase.initializeApp({ ... })
const store = new Vuex.Store({ ... })

// Binding
FireVuex.bindDatabase(store, app, {
  'message': 'message',
  'todos': { source: 'todos', type: 'array' },
  ...
})

Ways of binding

FireVuex.bindDatabase(store, app, dataMap)

• store is a vuex store
• app is a firebase app
• dataMap is an object describing how refs and queries will be linked to the store modules as such:

{
  moduleNameOrPath: {
    source: QueryOrRefOrPath,
    type: 'array' | 'object',
    cancelCallback: ...
  }
}

But you can do it shorter moduleNameOrPath: QueryOrRefOrPath.

There are two types of bindings, the array binding for lists and object binding for the rest.

Object binding

A source bound as object with the name foobar will create a foobar module with a foobar/get getter returning the current value and a foobar/set action that can be used to change the value.

Array binding

A source bound as array with the name foobar will create a foobar module containing list of records that you can retrieve with the foobar/get getter.

Each record contain a .key property which specifies the key where the record is stored. So if you have data at /items/-Jtjl482BaXBCI7brMT8/, the record for that data will have a .key of "-Jtjl482BaXBCI7brMT8".

If an individual record's value in the database is a primitive (boolean, string, or number), the value will be stored in the .value property. If the individual record's value is an object, each of the object's properties will be stored as properties of the bound record.

There are three actions available foobar/add, foobar/remove and foobar/update, that will allow you to handle the list.

Contributing

Clone the repo, then:

$ npm install    # install dependencies
$ npm run dev    # watch and build dist/vuefire.js
$ npm run build  # build dist/vuefire.js and vuefire.min.js

License

MIT 0

firevuex's Issues

Updated the source?

Hi again! Wanted do some updates to the code in this project, got latest but the package.json says 2.2.0 and the npm package 3.0.0. Is the source outdated? Thanks!

Handle promise from auth().signInWithPopup(provider)

Hi,

I'm trying to approve my app some so the user does not have to reload the page after signing in.

After you sign in with the method auth().signInWithPopup(provider) in row 15 in auth.js nothing happens as it seems the user (this.$store.getters['auth/getUser']) does not react. I think it is because of the promise returned from auth().signInWithPopup(provider) is not handled, but I'm not sure. What would you say?

EDIT: I think my issue lies somewhere else actually. The user property of auth does get set after login. But components computed using the user property don't react on it.

The computed users property is null because unauthorized users don't have read access, but if I reload the page after authenticated the users list is retrieved. So the question is, how do recompute all computed values after auth user is changed?

Best regards, Tim

How to get use Auth

Hi!
I like you tool so far, thank you! I'm using the database and it work fine. Now I would like to get started with the auth, but I'm getting an error of auth/signInWithEmailAndPassword not being an action available.
This is how I thought it should work by reading the source:



It seems as the store gets the getters for the user at least. Here I've logged in with the console:

I exposed the firebase app object to the stores state in fb for testing (rather ugly):