Vue.js dependency dilemma

During a Vue.js project, I'm asking all the time this question:

Where to insert the Vuex (store) dependency in components?

It's very easy and fast binding a Vuex getter to computed props in components, this way the component in not anymore totally decoupled.

What's your best practice when a little button needs to emit an action to modify a property? You can:

• allow the button to commit straight to the store
• walk the whole hierarchy component tree in order to reach a root component/view that is enabled to commit the store?

Any hints?

Comments

[Eric Hutchinson]

VueX is a global store. If it's a global object, there's no reason the button component shouldn't commit the action.