Ricardo Delgado

Posted on Jun 18, 2018

VueJS - Props, eventBus, Vuex... Battle Royale TO THE DEATH

#vue #beginners #vuex #javascript

Mean Gene Okerlund here, and folks we've got a treat here for you in the Evan You Memorial Colosseum in San Francisco, California.

Some say it was the fight that could never happen. That there would be too much at stake, and yet we find ourselves here seeing, indeed, who can handle data passing the best.

The rules for this match are simple, and brought to you by Vue-Cli3. They're newly revamped ladies and gentlemen, certainly one of our favorites:

Let's meet our three combatants:

Yokozuna (Props)
Randy 'Macho Man' Savage (eventBus)
The Ultimate Warrior (Vuex)

And let's take a look at this gorgeous ring, provided to us by the wonderful people at VueJS and Bootstrap4:

Home template with Bootstrap for layout purposes. Wrestler information in the array wrestlerList.

First up is the Behemoth from Japan, the former Sumo Wrestler turned WWE phenom...

Yokozuna (Props)

Yokozuna's strength is world renouned, and his voracity is just as infamous. I've seen the 600-pounder put down a few cheeseburgers in my day.

Unfortunately those 600 pounds don't allow for all that much mobility, and Yokozuna is limited to being able to grapple with only his closest opponent.

But that doesn't mean he can't be quite devastating; no one wants to find themselves on the bottom side of the tremendously powerful Bonzai Drop.

Yoko walks slowly to the ring:

Import yokoComponent from components folder. Register component. Then add to template. Then we pass the prop to the child component with yokoProp.

And here we see him setting himself up to enter between the ropes. No small feat, let me tell you what.

In the Yoko component, register the prop. Use validations, like type or required, if desired. https://vuejs.org/v2/guide/components-props.html#Prop-Validation. We'll be using the textarea later, but in the image below we're just displaying it as a text field. Also note the $emit method connected to the textarea through the finisherChange function which is triggered when changed.

If you look closely you can see that Yoko's information is being passed via the Prop move, a closely guarded training secret among WWE's elite, allowing the knowledge of generations of wrestler's to pass from one to the next.

But amazingly, Yoko can also use the Prop move to also pass that knowledge right back up to his glorious wrestling forefathers.

You heard that right folks, if you train hard, stay focused, and eat your vitamins you too can master this move:

Add the @update prop in the Home template that changes Yoko's information in wrestlerList when the textfield in the child yokoComponent is the updated.

But what's that?

It can only mean that one of WWE's most misunderstood wrestlers is coming to the ring...

Randy 'Macho Man' Savage (eventBus)

Folks, let me tell you from the start, Macho Man is a fan favorite with his crazed eyes, and that hellish elbow drop from the top rope.

Tonight he isn't accompanied by his better half, the stunning Miss Elizabeth, which means that Macho is here strictly to handle some business.

As I said, that flying elbow is quite the sight to see, and may even make Yoko look like yesterday's trash. But that death defying style comes with it's own risks.

Let's take a look at how Macho Man is planning on getting on the top rope:

Pass machoProp from Home.vue to topRope component.

Register flyingThroughTheAir component in the topRope component.

The secret to Macho's success lies in the stability of the ring:

In main.js file create the eventBus.

It's here that Macho can use the force created by his massive leg muscles, to propel him all the way across the ring:

Register the eventBus in Home.vue. Also add a button that triggers eventBus to emit Macho Man's information.

In the flyingThroughTheAir component, register eventBus, and use the $on event to add the passed Macho Man information into the machoInfo data object in the component.

Absolutely devastating.

But what's that! It can't be! It's none other than...

The Ultimate Warrior (Vuex)

Ladies and gentleman, sprinting to the ring, hair and tassels flowing like the manes of a stallion on the Montana planes comes The Ultimate Warrior.

I can't believe this is happening. Yokozuna and The Macho Man are looking around confused, they're demanding the referee does something about this interruption.

Many say that The Ultimate Warrior can do it all. We've seen him lift a tree trunk over his head, and then jump across a canyon. It's rumored that his biceps could power a city and that he may have swum across the Pacific Ocean.

Thankfully, the ring was already prepared to handle the awesomeness of The Ultimate Warrior, thanks again to our great sponsors at VueJS, "You Code 'Em, We'll Grill 'Em."

Here's a break down of The Warrior's training regime, this is high level secret info that we're exclusively bringing to you:

Register the runningToTheRing component in the Home.vue, and add to the template. Also register Vuex's addAction method, and add the mapActions helper in the component's field (mapActions are in methods, while mapGetters are in Computed). Note - the image is missing runningToTheRing in the components area.

In the runningToTheRing component register the shakingTheRopes component. Also add the shakingTheRopes Vuex action and wrestlerInfo getter helpers, and register mapAction and mapGetters helpers from vuex.

Finally in the shakingTheRopes component add a getter for ropesWrestlerInfo

The Ultimate Warrior is a complicated wrestler, he's not just all brawn and buff. And thanks to his training and amazing physique he easily powers his way through any challenge:

The empty Vuex structure. I added a getters section on the initial install from Vue-Cli.

Vuex with all actions, mutations, state, and getters.

We see here that The Ultimate Warrior can pass data wherever he pleases. He can work it down into mince meat if he needs to, or even share with all the loyal Little Warriors out there.

Add THE ULTIMATE button which triggers the runningToTheRing action, which adds the Ultimate Warrior's info to the state using a mutation, and can be retrieved as a getter.

runningToTheRing has a similar format, except it has an action and a getter.

And that's it folks. I think we can call this one a draw. Each combatant showing their stuff for each situation. A clash of Titans that leads to voluminous stories to tell. I'm sure we'll be seeing this battle again soon.

For more info check out the fantastically illuminating documentation by the fine people at VueJS:
VueJS Documentation

Till next time, this is Mean Gene signing off.

Top comments (7)

Diego Parisi • Jun 19 '18 • Edited

I would prefer a more “dry” article without the extra “wrestler” stuff...
Just a technical piece with the explanation of what you are trying to do, the code and results of your thinking.