Adds an additional example

[niallobrien]

Adds a link to a complete project example.

[codecov-io]

Current coverage is 94.36% (diff: 100%)

Merging #5 into master will decrease coverage by 0.87%

@@             master         #5   diff @@
==========================================
  Files             5          2     -3   
  Lines           147        142     -5   
  Methods           0          0          
  Messages          0          0          
  Branches          0          0          
==========================================
- Hits            140        134     -6   
- Misses            7          8     +1   
  Partials          0          0          

Powered by Codecov. Last update 0f257bd...5c31d78

[posva]

Thanks! I'll have to review your example first to say if I endorse it

[niallobrien]

Of course. Am I right in my assumption that actions are not required to dispatch mutations when using Vuexfire & Firebase?

[posva]

Yes. Althought you can create actions that uses the firebases refs to push data

[niallobrien]

Would that be the recommended approach for a large application? If so, perhaps it might be worth demonstrating this with an example.

[posva]

I don't think they should be used through $firebaseRefs because you it makes your code easier to change. Also because you cannot use them within the children

[posva]

You're using VueFire at the same time as VuexFire. That'd create double bindings

[niallobrien]

Thanks, I'll rectify that later today. Am I handling the dependencies in a correct manner? Not sure if I should be initialising a Firebase instance per component, but I guess it makes sense if the URL is directly related to a component (eg. Todo component -> firebaseUrl/todos)

[niallobrien]

@posva If I remove the references to VueFire from main.js, I get the following error in the browser console (and it doesn't load the Firebase data).
[Vue warn]: Property or method "messages" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component <message>) So if I add messages: [] to data() the error disappears, but no data is being loaded from Firebase - and there's no errors. Please advise. Thanks in advance.

[niallobrien]

Perhaps I'm not understanding what exactly is happening under the hood, but I've removed getters.js and in the Message.vue component, I've also removed the Vuex import, the computed: Vuex.mapGetters(...) statement and the app is still working correctly...
You can see the diff here: niallobrien/Vue-Vuex-Firebase@3de4790
In the dev-tools, I can see that Vuex maintains the correct state with Firebase. However, when I revert changes using the extenstion, I'm not seeing them being reflected in the browser/DOM. Should this be the case as I manipulate the app state?

Perhaps I've set things up wrong somewhere along the lines, but I think this project could really do with a solid example of how to use it after generating a Vue v2.0 app with Vue-CLI (using the Webpack template).

Thanks in advance.

[posva]

I'm wondering if adding this link is really necessary. What is the example missing in your opinion?

[niallobrien]

@posva A full application example, one constructed from using Vue-CLI (Webpack) as that is how a lot of people will be scaffolding their applications. Any ideas related to the issues I mentioned above? Very difficult to put something like this on CodePen...

Thanks.

[posva]

I'll find some time this week-end to help you. Quite busy atm 😅

[niallobrien]

Thanks @posva - much appreciated. I know that we can use Vuex with VueFire, but VuexFire really does seem to cut down on the boilerplate required. Thanks again.

[zoomclub]

Will the following be merged?

https://github.com/niallobrien/Vue-Vuex-Firebase

[posva]

If by the following you mean the PR, it still has to be updated. It's just an example with webpack

[posva]

Since the v2 is coming soon and the approach is completely different, I'm closing this.
I'll, however keep in mind that this kind of guidance interest people and provide resources for it

[niallobrien]

@posva Awesome stuff! 👍