Call a function from one component to another via vuex

Hi, what is the best/recommended pattern to call a function from one component to another via vuex? I have drawn a simplified illustration to show what is my approach.

In a nutshell: From my page I call a mutation inside my vuex, that just updates a timestamp, in my component I watch this timestamp and when it gets updated I call my function that do something and updates my store…

So I can keep all my logic inside my component. Is this a good or bad approach?

Hi,
in your graph, the data is only shared between one component and the page that is its parent. If the data is only used by this page, it is a little bit overkill to use vuex, a simple use of $emit. I would use vuex only if the data is used by more than one component. in such you may look at defined vuex setters and getters an use them with computed prop.
if you have code to share, I could look at it and help

I sounds like this method doesn’t belong inside of the component. Why do you need to run it there? do you need to access local state? then it sounds like this state isn’t really “local” state.

Hi, I think $emit isn’t flexible enough, because componentA could be wrapped inside some other component…

In my case I have a scrollbar component which I like to update from anywhere. So in my opinion I have 2 options.

Option A is put some logic inside my store. I just call the mutation to recalculate everything and then it updates my states and the magic happens. But I would like to keep all my logic inside my component. Therefore I’ m looking for some other solution.

Option B As described above. I update a state that just hold a timestamp or number that I increase to invoke the watcher inside my scrollbar component and that calls my update function inside my scrollbar component. After recalculating I update the store with the new values. So that other components like my waypoint component can use it.

I hope it is clearer now what I like to achieve :slight_smile: