Bus vs vuex


#1

Hello,

I’m just starting to learn vuejs and try to understand the principle of communication between components.

The doc say here that for non-parent-child communication we can use a bus or vuex

I’ve tried a minimal test with :
1 “snowman” component = can be green or blue and can jump
1 “remote-control” component = with 3 buttons to change the snowman colour and make it jumping

The “bus” solution seems to me easy to understand :
https://jsfiddle.net/k0z876t0/

But with the “vuex” test I made :
https://jsfiddle.net/u189azex/2/
changing the colour of the snowman work great and seems logic to me,
but I’m confused about the way to make it jump using vuex.
Jumping is a “function” and not a “state”, so how can I tell the store to run a function of a component ?
For the moment the only solution I’ve found is to increment a property “isJumping” in the store and to watch it in the snowman component. But it doesn’t seem to be the way to do that sort of things. How should I do that ? Does the animation part should be in the store itself ?

Thank if you can help me, It’s the part that blocks me the most to go forward

Sorry my bad english, hope this understandable.


#2

Hey,

you picked a great example!

Generally I would not define this question as an either/or. My advice would be as follows: use vuex for everything as a default, and drop back to an event bus when vuex becomes a hurdle.

Event buses are great to fix a few edge cases, maybe like the one you showed, but 98% of the stuff in your typical app is not a function ,but really state.

Also, you can even translate such a “function” into state, with two mutations (i used ‘jump’ and ‘land’):
https://jsfiddle.net/Linusborg/u189azex/3/


#3

Thank you for your answer !

Your solution with “jump” and “land” looks better than the “increment” I did, but this way the “isJumping” watcher is fired 2 times, may not be a problem but look not very “clean” ?.

Use both vuex for state/properties and bus event for “function” embarrass me because it will be two places where components are managed, but as you say if it’s rare it could do the trick.

May be the best way should be a “all properties/no function” way ?
In real life functions are often associated to “movements” : run, jump, open, close…
and movements are properties that changes in space/time… (ex : jump = go from 0 to 50 cm, open = goto 0° to 90°… etc). So in vuex functions could be “actions” that translate properties/state ? Will give a try.
Something like that https://vuejs.org/v2/guide/transitioning-state.html but in vuex actions ?


#4

Well, finding a solution that works for 100% everything is not realistic. As I say, I think such “functions” are very rare, unless you try and write something like a browser game, where things might look different.

That would not feel right. Vuex should never have any contact to the DOM in my mind.It’s concerned with state, nothing else.


#5

Your absolutely right, I’m just trying to understand the much I can how it’s works and should. When we start learning it’s not easy to get exactly how the framework is supposed to be used.

Yes sure, but I was thinking to something like that : https://jsfiddle.net/gb504x07/
here the store don’t know anything about the DOM, only the “top” value as a simple number, and the tween append in the store.
For me it is more fitting the Model/Vue pattern, but in this case I think that we should loose the benefit of TweenMax that is much faster when tweening directly a DOM element (gpu acceleration).


#6

At the end of this discussion : https://github.com/vuejs/vuex/issues/359
ktsn give an example of inserting “model” in vuex store : https://jsfiddle.net/uzt0eqm1/

In his example, the User model have only properties, no function.
I wonder if it could be a good way to use the ktsn way and have functions/events communication in the model inserted in vuex store.

I’ve made I try like that :
https://jsfiddle.net/sa0moa19/

What do you think about ?