What Is Vuex, And What Is It Used For In VueJS? – A Very Simple Crash Course Tutorial

In jQuery, triggered events were the most important things.

Almost everything that happened, would happen on an onclick, a hover, a keyup/keydown, or some other kind of event.

In Vue, while events sometimes act as triggers in and of themselves, for the most part, the actions that happen within a VueJS UI primarily are triggered by the data within a Vue application, and the changes within that data.

We lay this out in much more detail in our post on VueJS Components, but we will go over how this all works briefly below, as a refresher.

VueJS Data And Components – How It All Works

Vue applications, can be thought of as a collection of cascading, UI based, mini-apps. Those mini-apps, coming in the form of relatively self-contained Vue Components.

These mini-apps or components, are all children of the main parent component that initializes all of the others.

This is usually contained within your App.vue file in your Vue application folder directory.

This is a simple diagram that shows you visually what we are talking about here:

[Add a visual diagram here.]

How Data Works, And Flows Within The VueJS Code Structure

In jQuery, data is typically held across the application without much of a predefined structure. It is usually captured by querying an element ID or class and is pretty much globally accessible across the application by default.

In Vue, data is much more self-contained, yet powerful when used.

With a basic Vue application that does not use components, events will have more of the emphasis, as at this point the Vue application is closer to a jQuery application in terms of general, mostly event-driven flow.

As the VueJS application’s complexity increases and components are added, the data-driven aspects of Vue gradually begin to take hold. Simply meaning that as you create a more complex application with Vue, the level of influence that data has within it, rather than events, increases.

Vue data expresses itself most effectively with Components.

The key to this expression comes down to how well the data moves around the application via the use of components.

As the most efficient unit of the UI. Components allow data to flow seamlessly downwards and upwards from parent component to child component.

An example of this will be shown below as you read on.

But what happens when that component of the UI needs to communicate with another, similar component unit?

Then it gets quite complicated.

But before we get into that, let’s first get into how data typically flows up and down Vue Components.

Then we will discuss how data can flow even more efficiently, in any direction you want, whether that is between components or as we have stated above, up and down them.

This increased efficiency will be had with the use of a tool called Vuex.

How VueJS Components Typically Communicate With One Another, Without Vuex

The simplest, standard method of communication across Vue components is between Parent and Child components, communication also occurs between components more directly. We will explore the ways in which components may communicate below.

Vue.js allows component communication in the following ways:-


1. Parent to child communication (Using Props).

This communication is done downwards via the use of ‘props’ which are simply variables that are specific to a particular parent component, and can be inherited by child components.

These are passed into the child Component via the use of Component arguments as well as set within the parent Component instance itself.

We do this setting of the prop within the parent Component instance like this:

[code showing the setting of a prop within the parent component instance]

We may then pass our prop into our child Component with the use of component arguments like this:

[code showing the passing of a prop within the child component instance]

This is how we pass data from our parent Vue Component down to our child Components.


2. Child to parent communication (Using Events).

To pass on data to our child Components, we use a slightly different strategy. Because we are not able to pass props from our child Components up to our parent (props can only be used by the parent component or be inherited by the child).

To get our data up in the other direction towards our parent component, we use events.

The easiest way of doing this is via the use of Vue’s custom $emit event method.

This method can be used from within the child component like so:

[Example of an $emit event being triggered].

It can then be received by the parent Component like this:

[Example of a parent component receiving the child component data via the use of an event]


3. Communication between any component (Using Event Bus).

While the above two methods work well for communication between parent and child components, up and down, if you want to communicate across components you will simply use the Vue ‘event bus’.

The event bus is basically a global event handler and tracker. It keeps tracks of events in a manner that allows any Vue Component to listen and capture them.

To add an event to the event bus, you must simply emit an event from one component and then listen for the corresponding event within the other component:

[code showing addition of an event to the event bus]

Whenever this event is triggered, you may listen to it within any component you want to. Passing in any relevant data along with it.

To listen to an event within a chosen component, you will simply do y:

[code showing the listening of an event]

This method of doing things is ok, but ultimately, firing events all the time just to pass data from component to component is a bit cumbersome.

This becomes especially true when dealing with a relatively large application.

It would be a lot better if there was some sort of global ‘model’ that we could leverage in order to both add or set data, as well as get it whenever we needed it.

Fortunately, this is what Vuex allows us to do.

How Vuex Works Within the Context Of A Vue App

Note: Before jumping into this part, you will have to load Vuex within your application. You may do this via the command line by typing npm install vuex --save from within your project directory.

Within the context of a Vue app, you will use Vuex by first creating a file within which to house your Vuex Store. A “store” is basically a container that holds your application state.

State is basically an object within which the data that is to be used by the components in your application will be held. Those objects essentially being props that are globally accessible for the Vue application to use.

State is an interesting term, because it basically alludes to the data-driven nature of Vue. An application’s functional ‘state’ is defined by the ‘state’ of its data.

The Vue store works in a similar way to a Vue Instance, in that to set it up, and the structure that it uses to work are very similar.

Once this is done, you will simply reference Vuex within your store.js file like this:

[code showing the referencing of the Vuex files, within the store.js file here]

We will here instantiate our Vuex store within the same store.js file like this:

[code showing us instantiating our Vuex store and then adding the state props that we would like to add].

Vuex essentially allows us to store, mutate (manipulate) and then retrieve our data easily and simply via a globally (by all components) accessible store.

The structure here is very simple. At the top of the store we have the actual ‘state’ data. Under that we have our mutations (methods we use to modify our data).

The data that we’ve set within this object can now be accessed by any of our Vue components.

All we have to do is add our ‘store’ option within our root Vue instance. This allows the stored Vuex data to be accessible by all of our components.

There are many things you can do and many ways that you can now play with this data. From manipulating it with mutations to allowing it to be dynamically accessible via the use of ‘getters’.

The key things that Vuex gives you are easy, safe access to global data as well as a bunch of plugins that supercharge what you can do with that data.

This gives you the ability to deal with application data at a higher level of abstraction, and ultimately, makes the development process just that little bit easier.

To be the first to know when we publish a new post or book, you may also subscribe to our email list below


Why Most Programming Tutorials Are So Hard To Understand – (And A Solution To This Problem)

To reason logically is so to link one’s propositions that each should contain the reason for the one succeeding it, and should itself be demonstrated by the one preceding it.

Jean Piaget

The above quote is from the Swiss psychologist Jean Piaget, a well-known figure in not just the psychological field, but also in the education field.

I want you, as you read through this post, to keep this quote in mind.

You will see why as you continue to read.

You might be asking yourself what the above quote might have to do with programming tutorials, and the answer is, well, a lot actually.

But before we can get to fleshing that out, we must first start with the core issue that I believe is the cause of hard to understand programming tutorials (and programming documentation for that matter).

That issue is one of ‘imposter syndrome’.

The Two Sides of the Imposter Syndrome Coin

I have a theory about imposter syndrome. That is that it is simply a symptom of a more profound problem.

That is the problem of believing that everyone is at the same level of knowledge that you are, and that they understand that knowledge in the same way that you do.

In the same way that the self-consciousness that seems to be produced by a lack of ego in, say, a social situation, is actually the result of a preoccupation of the self. Imposter syndrome is likely caused by too much of a focus on one’s own level of knowledge and a mistaken projection of that level out into the social world.

Jean Piaget also seemed to know this well:

Egocentrism is, in its essence, an inability to differentiate between the ego and the social environment.

Jean Piaget, The Moral Judgement of the Child

Egocentrism sounds like a bad thing, a character flaw almost. But it is in fact, simply a description of a very normal human trait. It is, at least according to psychologists like Piaget, how we began to think as children.

It is from this basis that, he believed, we began to gradually differentiate, or said another way, to ‘learn’ our environment, by a gradual process of both separating what was in front of us from ourselves, and then also, combining those things with other things and seeing how they would link and interact.

In this process, he believed, we would gradually ‘build’ knowledge structures from the ground up. These structures would be the representations of the things we were seeing as well as the links between those things, a schema of sorts, of all the things that we had, over time ‘learned’ and connected within the web of our knowledge structure. This with all preceding knowledge serving as the foundation for all the knowledge that would succeed it.

Sound familiar?

This method of learning proposed by Piaget is what became known as the constructivist theory of knowledge.

Jean Piaget’s development of the constructivist theory of knowledge was probably a direct response/result of his discovery that we (including people who teach) have a natural inclination to believe that our own level of knowledge is also the level of other people. A form of ego-centrism that is inherent within all of us. The constructivist theory of knowledge says, in contrast to this, that we should be more empathetic. It encourages us to first endeavor to exercise empathy with our potential student, to try to know what the learner already knows, and then, and only then, from that foundation, begin to teach and further ‘build’ their knowledge base.

This is what most programmers who make tutorials fail to do. And it is not really their fault. With the mass proliferation of tutorials that we currently have, it is easy to forget that teaching is itself a skill. One that needs to be trained.

Without the fundamental empathy needed to meet the learner at his or her level, the teacher, in this case, the tutorial maker, will simply be making too many assumptions, based on his own level of knowledge and therefore be building a structure on a foundation that may not even be there.

This is very often the case with programming documentation in particular.

Ever had to Google most of the missing pieces in an installation process, simply because the author had assumed that you already knew certain parts of it? I know I have, on numerous occasions.

So how does one solve this? How do you go about 1. Gaining the empathy with the learner necessary to create a great tutorial. And then 2. Effectively teach and ‘build’ on the learners existing knowledge structure?

Let’s start with 1.

How To Gain Empathy With Your Learner As A Tutorial Maker

The sheer amount of ‘foundation’ or level of knowledge that is needed nowadays, means that the depth of the research process that you undertake as a teacher must strive to match it.

Fortunately, we live in an era where the level of depth in one’s research that can be achieved is relatively high.

By depth, I am referring to the amount you can know about your learner’s current level of knowledge.

The way in which you will do this will be two-fold.

  1. Target a specific type of learner. Know who exactly it is that you are trying to teach.
  2. Gain empathy for the learner’s level of Knowledge. By building a mental model of the current foundation that the learner has.

To achieve one, you must simply try to visualize in your mind’s eye, a specific person that you would like to share knowledge with. In this, you must be very specific.

The best person to target in most cases is yourself, as you have an infinite amount of knowledge about this demographic.

Doing this well will reveal many of the traits as well as the likely habits of the target learner. This arms you appropriately to be able to do the next step.

Once you have gotten yourself a clear enough picture of who you would like to teach, the next step is to gain empathy with the target learner and then gradually build a mental model of their current level of knowledge. This is done by seeking out the places where your target learner hangs out. This can be on sites such as Reddit, but even YouTube videos and comments, as well as things like Amazon reviews, can serve as good sources. Anywhere your target learner is likely to be and has an impetus to be active in some way (such as by making a comment) can work well.

Once you’ve done this, simply observing them and over time, gradually building up your mental model, you will begin to slowly develop a clearer picture of your learner’s current knowledge structure. This can take as little as a day to a week, depending on your level of skill in this, as well as how much your mental model already matches that of the target learners.

Once you have gotten yourself this synchronicity with your learner. You are now able to move on to the next step.

You are now ready to teach.

How To Teach Effectively, The Constructivist Way

We learn best when our neurons get ‘switched on’, or activated.

This activation of neurons then helps to facilitate the ‘linking’ or ‘absorption’ of new information that occurs when we learn. 

Neurons are best activated by novelty. Learning or experiencing something new. Like a new language or framework, for example. 

What this activation does is simply prime the brain for information storage. 

It gets it ready to build on the knowledge structure.

Once this happens, the brain then begins to store the new information by following a process of searching for pre-existing information within the brain and then linking or ‘associating/absorbing’ the new information with the MOST similar information to it it can find. Ultimately building a new knowledge structure or concept. 

The key words in the last paragraph are ‘searching’ and ‘most’

You see, the more similar the associative link is that the brain uses, the faster, and more efficiently the brain can absorb that new information. Because the brain can now leverage the other related relationships that that link has, which are likely to be similar to the relationships inherent in the representation of the new information.

For example: Let’s say that you just saw a spoon for the first time.

Your brain wouldn’t store that new information as simply a spoon just like that. It would have no basis upon which to do so. 

It would instead first look for what it already had stored in there that was similar to a spoon, say, a fork, and would then store the spoon as a fork-like-thing, in relation to the fork. The representation of a spoon in the brain would then actually be attached to the representation of a fork. They would be linked – neuron to neuron. And in that process, the learning of a spoon as a concept represented in the mind would occur.

The brain then, would interpret a spoon to be something like a fork but with a rounded top and no gaps. The concept of a spoon could only be ‘learned’ or said another way, ‘absorbed’, and then subsequently exist in the brain, as an extension of the concept of a fork.

So using this example of the fork and the spoon. The only truly new information that needs to be stored is that of the top side of the spoon and its difference with the fork. The brain leverages the knowledge of the bottom side (the side you hold with your hand), and saves the energy of having to store that again. If you now, on top of priming the brain with novel information, like a new programming language or framework, present that new information with the best associations that the brain can leverage, such as the most similar languages and frameworks to the novel one, you effectively eliminate the searching process that the brain has to typically go through on its own. With the end result that you massively increase the speed of absorption and learning.

This is what we mean in practice when we talk about teaching with a constructivist approach.

The emphasis is on first, gaining empathy enough that you can see the pre-existing knowledge structure in your learner that can be leveraged. And then once you’ve grasped that, pulling on that structure in order to efficiently store new information into it.

This approach, if applied well, can make your programming tutorials and documentation easier to understand for your learners, and simply that much better overall.

—-

This is the style of teaching that we use within our books and courses at FromToSchool.

We are creating the first programming books that aim to focus strictly on teaching new technologies to experienced developers, using the languages and the frameworks that they already know. No brain searching needed. 

Our goal is to not only allow developers to increase their learning speed in order to keep up with and match the speed at which technological change is taking place, but to surpass it. Be sure to check out our books and courses if this approach and article interested you and you’d like to learn more.

You may also subscribe to our email list below to be the first to know when we publish a new post or book.