vuexfire and mutations

[chrisbraddock]

These two things seem to be at odds and it's making it hard for me to understand how I should be trying to structure my code:

1. The Vuex docs state, "The only way to actually change state in a Vuex store is by committing a mutation."

2. The Vuexfire TodoApp addTodo() method uses $firebaseRefs.items.push() to create records.

I would have guessed there to use something like: store.commit('addTodo', <payload>) or, from what I'm reading, I guess that should even be pushed through an action rather than a mutation.

Although … shouldn’t addTodo()’s Firebase work be done in an action and based on its success/failure trigger a mutation?

That seems close to the use case described in the Vuex Actions docs under the Dispatching Actions section at the code sample with header: “A more practical example of real-world actions ... which involves calling an async API and committing multiple mutations:”

[posva]

The goal of vuexfire is to sync a firebase database to your store. Mutations are automatically committed by vuexfire when a ref is remotely updated. Therefore, you don't have to worry about committing mutations when editing the ref. What you have to do is to push the modifications to the firebase database.
Proxying the modifications on the state and then push them to firebase would be convenient but it is more robust to rely on the existing firebase API.

I'm now thinking that the real problem here might be that the user has to provide the firebase references at a vm level and that causes confusion. Declaring them at a vuex level isn't flexible enough. Committing a mutation to bind and unbind is tedious. I'll have to think a bit more about binding references. Suggestions are welcome 🙂

[chrisbraddock]

It definitely helps to understand the Vuexfire intent. 👍

I was largely confused about where to centralize business logic. For example, what if creating a ToDo should also create a separate history record and also hit an API to trigger an SMS notification - where does that logic live?

The ToDo example app just **$firebaseRefs.push()**es in a method hanging right its instance - obviously not some place you want actual logic.

But maybe actions is the answer. I need to play a bit more now and see. :)

As far as when/where declaring the Firebase references makes sense, yeah I'm not sure how to improve on that conceptually. It would definitely be an area where some documentation regarding what Vuexfire is doing would help though.

[posva]

As far as when/where declaring the Firebase references makes sense, yeah I'm not sure how to improve on that conceptually. It would definitely be an area where some documentation regarding what Vuexfire is doing would help though.

Yes, that's something planned. Also mentioned at #12