Provide doc about integrating in bigger projects

[posva]

As seen in #5 and other requests, it'll be great to get further guidance and best practices about how to use firebase with vuexfire

• Where to bind references (actions)
• Where should the actual bound called (where to dispatch actions)
• where to host references
• How to write tests

Feel free to share your thoughts on this about what you'll like to see

[arranf]

I'd love to know how to write unit tests!

[vershinin]

Hi, I am interested in first two rows. Also, I have a question. How can I use vuexfire with strict mode? It looks like it is not possible. You can have a look here: http://codepen.io/ivershinin/pen/oBmYXX

[posva]

Strict mode is supported on v2. for the v1 it needs a mutation to call the function here instead of directly calling the function

[vershinin]

@posva How stable is v2 for production use?

[posva]

The internals are stable, it's really simple after all. The API will change in the future to make things easier, but we're still discussing the changes needed to Vuex to make that possible. If you use it today, you'll have to compile it by yourself and when the stable version is released, adapt to the API, which should be easy. Also, there're no docs other than the examples and unit tests. But it's really easy 🙂 , other people got it working already

[scharinger]

Is vuexfire compatible with vue-router? I'm trying to use it with vue-router and have an issue. I load an array from firebase with 'db.ref('listOfObjects')' which I use tie up with the component firebase property and mapGetters. Everything works fine, adding items to firebase with push also works. But if I navigate to another component using the a db.ref to the same source and then push an item to the db, the local collection gets the item added twice, but only in the local state and not in the firebase db. Is this a bug, me doing it wrong or simply vuexfire not compatible with vue-router?

EDIT: I now see the VUEXFIRE/arrayAdd is fired twice.

[chrisbraddock]

It works fine in my experience. Not sure what issue you're experiencing specifically but check out Vuex router sync if you haven't already.

[posva]

Is vuexfire compatible with vue-router?

Of course 😄

If you have two items added you probably bound a ref twice, but who knows, it may be a bug. In that case, boil down the issue in a jsfiddle and create a new issue 🙂

[scharinger]

I've tried to make sure the refs only binds once as I suspected it. Then I've also wrapped <router-view> in a <keep-alive> element. I'll hope to get time in the weekend to make a jsfiddle of it. Until then its possible to witness the bug here.

[scharinger]

An example using vuex, vue-router, keep-alive and a ref on multiple components would be helpful.

[posva]

@Tim86 The Where to bind ref examples will probably clear things out for you

[chrisbraddock]

@posva I've been hacking on the new version a bit with no issues. Love the new bind methods. 👍

More examples of where to bind would be great. In particular, an example that shows how to bind based on some state data or maybe a URL parameter.

I would definitely like to hear if there are best practices or recommended patterns for reference storage and maybe dereferencing.

[posva]

Thanks for the feedback @chrisbraddock ! Happy to see you're using it fine!

I'll note that. I'll have to create a full doc, not just the readme so it scale better. Well, since bind are accessible in actions, you have to bind in actions and pass any data as a payload or directly from the state About storing the references, if you don't need them anywhere else, you can simply store them in a let myRef in the actions.js file. Otherwise, you can create some kind of abstraction to store them and share them. I'm pretty sure that pattern has a name 🙂 I thought about exposing a method to access bound refs but that would only work within a module, so no sharing

[chrisbraddock]

Sorry, I guess I meant when (and how) to bind vs. strictly "where" as in when in the Vue lifecycle, and how, given perhaps a reference that requires an id from route or other context. I was trying to think in terms of the common real world issues I've hit the times I've integrated VuexFire.

For my references, I ended up with a simple object scoped to store (I'm not using modules yet), so it sounds like that's within reason. ;) Thanks!

[morkro]

Hello everyone 👋 Is this still being worked on?

I am new to Vuexfire, and currently trying to migrate an existing app from IndexedDB with localForage to Firebase. It's not that easy to figure out where to actually bind the references and how that overall works. My current action creators are Promise based and I don't really understand how to go from here. Do I have to replace them? When do I call the new(?) action?

[posva]

Moved to https://github.com/vuejs/vuefire/issues/145