1- # VuexFire [ ![ Build Status] ( https://img.shields.io /circleci/project/posva/vuexfire/master.svg )] ( https://circleci.com/gh/posva/vuexfire ) [ ![ npm package] ( https://img.shields.io /npm/v/vuexfire.svg )] ( https://www.npmjs.com/package/vuexfire ) [ ![ coverage] ( https://img.shields.io /codecov/c/github/posva/vuexfire/master.svg )] ( https://codecov.io/github/posva/vuexfire ) ![ size ] ( http://img.badgesize.io/posva/vuexfire/master/dist/vuexfire.min.js.svg?compression=gzip )
1+ # Vuexfire [ ![ Build Status] ( https://badgen.net /circleci/github/vuejs/vuefire )] ( https://circleci.com/gh/vuejs/vuefire ) [ ![ npm package] ( https://badgen.net /npm/v/vuexfire/next )] ( https://www.npmjs.com/package/vuexfire ) [ ![ coverage] ( https://badgen.net /codecov/c/github/vuejs/vuefire )] ( https://codecov.io/github/vuejs/vuefire )
22
33> SSR ready Firebase binding for [ Vuex] ( https://github.com/vuejs/vuex )
44
@@ -9,13 +9,13 @@ If you need an older version check the `v1` branch: `npm i -D vuexfire@v1`
99
10101 . Using a CDN:
1111
12- ``` html
12+ ``` html
1313<script src =" https://unpkg.com/vuexfire@next" ></script >
1414```
1515
16162 . In module environments, e.g CommonJS:
1717
18- ``` bash
18+ ``` bash
1919npm install vue firebase vuexfire@next --save
2020```
2121
@@ -24,31 +24,32 @@ npm install vue firebase vuexfire@next --save
2424Add the mutations to your root Store and make sure to define the property you
2525want to bind in the state first:
2626
27- ``` js
27+ ``` js
2828import { firebaseMutations } from ' vuexfire'
2929const store = new Vuex.Store ({
3030 state: {
3131 todos: [], // Will be bound as an array
32- user: null // Will be bound as an object
32+ user: null , // Will be bound as an object
3333 },
3434 mutations: {
3535 // your mutations
36- ... firebaseMutations
37- }
36+ ... firebaseMutations,
37+ },
3838})
3939```
4040
4141It works with modules as well, but ** you don't need to add the mutations there** :
42+
4243``` js
4344const store = new Vuex.Store ({
4445 modules: {
4546 todos: {
4647 state: {
4748 todos: [], // Will be bound as an array
48- user: null // Will be bound as an object
49+ user: null , // Will be bound as an object
4950 },
50- }
51- }
51+ },
52+ },
5253})
5354```
5455
@@ -59,12 +60,14 @@ context, `bindFirebaseRef` and `unbindFirebaseRef`:
5960``` js
6061import { firebaseAction } from ' vuexfire'
6162
62- const setTodosRef = firebaseAction (({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
63- // this will unbind any previously bound ref to 'todos'
64- bindFirebaseRef (' todos' , ref)
65- // you can unbind any ref easily
66- unbindFirebaseRef (' user' )
67- })
63+ const setTodosRef = firebaseAction (
64+ ({ bindFirebaseRef, unbindFirebaseRef }, { ref }) => {
65+ // this will unbind any previously bound ref to 'todos'
66+ bindFirebaseRef (' todos' , ref)
67+ // you can unbind any ref easily
68+ unbindFirebaseRef (' user' )
69+ }
70+ )
6871```
6972
7073Access it as a usual piece of the state:
@@ -73,9 +76,9 @@ Access it as a usual piece of the state:
7376const Component = {
7477 template: ' <div>{{ todos }}</div>' ,
7578 computed: Vuex .mapState ([' todos' ]),
76- created () {
79+ created () {
7780 this .$store .dispatch (' setTodosRef' , db .collection (' todos' ))
78- }
81+ },
7982}
8083```
8184
@@ -127,11 +130,13 @@ bindFirebaseRef('todos', ref)
127130Returns a promise which will resolve when the data is ready, or throw an error if something goes wrong:
128131
129132``` js
130- bindFirebaseRef (' todos' , ref).then (() => {
131- commit (' setTodosLoaded' , true )
132- }).catch ((err ) => {
133- console .log (err)
134- })
133+ bindFirebaseRef (' todos' , ref)
134+ .then (() => {
135+ commit (' setTodosLoaded' , true )
136+ })
137+ .catch (err => {
138+ console .log (err)
139+ })
135140```
136141
137142### unbindFirebaseRef(key)
@@ -147,8 +152,3 @@ unbindFirebaseRef('todos')
147152## License
148153
149154[ MIT] ( http://opensource.org/licenses/MIT )
150-
151- ## Support on Beerpay
152- Hey dude! Help me out for a couple of :beers : !
153-
154- [ ![ Beerpay] ( https://beerpay.io/posva/vuexfire/badge.svg?style=beer-square )] ( https://beerpay.io/posva/vuexfire ) [ ![ Beerpay] ( https://beerpay.io/posva/vuexfire/make-wish.svg?style=flat-square )] ( https://beerpay.io/posva/vuexfire?focus=wish )
0 commit comments