Remove VueFire

[microcipcip]

Hi, you can remove VueFire in this way.

It would be nice to keep the getters and the actions within the vuex module but so far I haven't been able to do it. The actions are plain broken because I need to import/initialize Firebase inside messages.js (maybe it is possible to init Firebase only once and pass a variable to the action?), but the getters should work...dunno why don't work!

References:

• https://github.com/vuejs/vuex/releases/tag/v2.0.0-rc.1
• http://forum.vuejs.org/topic/5132/what-is-the-easiest-way-to-access-vuex-store-in-vue2-and-vuex2/4

[niallobrien]

Thanks for the tips. I'll have to check out your fork. From an initial glance I can see that your actions are in fact Vue methods which should be within the Messages.vue component as they modify the UI, not the state. When using VuexFire there's actually no need for actions (the library author mentioned this in another issue). Are the getters working for you?

[microcipcip]

Ok, I am still confused about when to use Vuex....but yeah the getters work if they're inside the Messages.vue (as modified here) but not when they're coming from messages.js.

Btw, isn't adding and removing elements from the database a change in the state of the app? See this example.

[niallobrien]

You use Vuex when you want to make state management much easier for large apps. Normally when you modify the db you'd then have to call an action to dispatch a mutation to update the state/store. See https://github.com/niallobrien/feathers-chat-example/blob/master/client/src/vuex/actions.js for example, the app is listening for an event (over websockets) from the server, and when it receives the event, it then dispatched the mutation to modify the state. I also covered this process in this video: https://www.youtube.com/watch?v=zbhYcxr5ldk

[microcipcip]

Thanks, I'll have a look :)

[niallobrien]

@microcipcip I've opened an issue here. Hopefully we can get to the bottom of such issues and get this working as soon as possible. :)

[microcipcip]

Ok, btw, what is the main reason to use VuexFire? Is VueFire more difficult to use with Vuex?

[niallobrien]

VuexFire makes it easier to use Vuex with Firebase. You can use Vuex & Firebase without VuexFire as shown in the repo you linked to above, but there's more boilerplate involved.

[microcipcip]

I have been playing with this setup, but there's something quite confusing about Vuex with Firebase. The ADD_MESSAGE mutations is never called right? In fact I can't see it in DevTools. I can actually delete it and the app still works as usual.

[niallobrien]

I can see mutations being added to Vuex once I include VueFire which is really weird!

[microcipcip]

Yeah, I'll go without Vuex until there is a clear path, I am too noob to understand how to do it myself ;p

[niallobrien]

@microcipcip If you really want to use Firebase and a good state manager, I currently recommend using VueFire and Vuex - you don't have to use VuexFire in order to use Vuex, so for now I'm using VueFire with Vuex and just doing the bit of boilerplate that's required, it's no biggie. :)

[microcipcip]

Ok, if you have a boilerplate, it would be nice to see how you implement it, atm I am developing an app without vuex because I was stuck ;p

[niallobrien]

Didn't you link to a Firebase example that used Vuex in another issue? Or was that using Vuex v1? I'd imagine v2 should work just the same. I'll see if I can get some time to make another simple example using just VueFire and Vuex.

[microcipcip]

Yes that was for Vue 1.0 with Vuex 1.0