loading...
Cover image for VueJS - Props, eventBus, Vuex... Battle Royale TO THE DEATH

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

rdelga80 profile image Ricardo Delgado ・6 min read

Mean Gene Front

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:

Vue-Cli3 install

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.Vue screen

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

Display on localhost

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

Yokozuna (Props)

Yokozuna

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:

Yoko Home Register Component
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.

Yoko Component
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.

Yoko Drop

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:

Yoko with update on prop
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.

Yoko update parent vue

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:

Macho Man Top Rope
Pass machoProp from Home.vue to topRope component.

Macho Top Rope
Register flyingThroughTheAir component in the topRope component.

Macho standing

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

Macho elbow defined in main.js
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:

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

Flying Through The Air Vue
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.

Macho dropping the elbow

Absolutely devastating.

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

The Ultimate Warrior (Vuex)

Ultimate Warrior

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:

Home Map Action
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.

Running Action and Get
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.

Shaking the ropes
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:

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

Vuex With All
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.

Home with Bttn
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.

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

Ultimate Running

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.

Mean Gene Here

Posted on by:

Discussion

markdown guide
 

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.

 
 

Your Vuex chapter is something that is missing on my blog post.

Will update it soon...

Nice post BTW

Thanks. It's good to go over Props and eventBus, Vuex takes them over (especially eventBus).

 

I agree. The wrestler spiel was fun for a paragraph or two, but then distracted too much from the actual point of the article.

 

This is my first technical write up, I apologize ahead of time if there's any egregious errors (imposter syndrome kicking in).

 

I got a real kick out of reading this. Thank you for having some fun with it.

 

Glad you liked it. Sometimes you just gotta entertain yourself. Haha.