Category: The Browser

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


What The Vue Instance Is, And How It Unlocks The Magic Of VueJS

What Is The Vue Instance?

Before we can start to do anything with VueJS on our webpage, we first need to create a way for Vue to initialize and then ‘bind’ itself onto that page.

Just as in jQuery, nothing happens until we initialize our document ready function, like this:

$( document ).ready(function() { console.log( "ready!" );});

In Vue, nothing happens until we create our Vue Instance, like this:

<script>
new Vue({
    el: '#app'
    data: {
        
    }
})
</script>

Within the bounds of this Vue Instance, which is just a simple JavaScript object, we can write the code that Vue will recognize and then execute onto the page.

Let’s first take a deeper look into what is actually going on with this Vue instance object, and then we will talk more about what it can allow us to do on our HTML page specifically, and how it unlocks the magic of Vue.

Inside The Vue Instance Object

On the first line, we begin with the instantiation of our class object, which bears the title of Vue, like this:

new Vue({ }}

This creates and initializes the Vue instance within our browser.

Next, within our created Vue instance, on the first line of our object, we add in our ‘el’ option, which looks like this:

new Vue({
    el: '#app'
})

What this ‘el’ option does is simply ‘bind’ our Vue Instance to an element within our HTML (in this case, one with an ID of ‘#app’), allowing us to apply our Vue functionality to everything that is within that element.

Putting it all together, it would look like this:

<div id='app' </div>

new Vue({
    el: '#app'
})

As you can see, our <div> element, with an ID of ‘#app’ has been bound to our newly created Vue Instance. Another way that we can refer to this ‘binding’ of an element by Vue within the Vue instance is as a ‘mounting’ of, or to ‘mount’, an element. It means the same thing. Simply that we have attached our Vue instance to that element, in order to activate Vue’s functionality within that element.

A key difference to note here, coming from jQuery, is that rather than applying functionality to the entire webpage, as is done with jQuery, in Vue, functionality is only applied to a specific section of the page – one that is bound to a Vue instance (of which there can be many). In this case, our <div> element, with an ID of ‘#app’.

Lastly, we have our ‘data’ option. Which as you’ll see soon, is one of the most important parts of our Vue instance in terms of functionality. It looks like this:

new Vue({
    el: '#app'
    data: {
        someText: 'helloThereText'
    }
})

As you can see here, after creating our Vue instance and then mounting it onto our ‘#app’ element, we then set some data within our instance. This gives our mounted <div#app> element access to the data that is within our Vue instance object.

That data can now be used directly within our mounted HTML element, like this:

<div id='app'>{{ someText }}</div>

By placing the data variable from our instance within double curly braces, we allow Vue to recognize and then ‘interpolate’ the data as being from our Vue instance, in the example above. This data is then transformed into the text that it contains within the mounted HTML element.

On page load, the data held within our ‘someText’ variable above will be displayed out onto the loaded page as the text, ‘helloThereText’.

How The Vue Instance Unlocks The Magic Of VueJS

So from the example above, we can see that a Vue Instance is basically an object that is created in order to allow us to attach Vue functionality to our HTML.

Let’s now take a slightly closer look at what the Vue instance is and what it can do. The explanations below will aid you greatly in getting a deeper understanding of what Vue can do for you, and in general, what Vue is all about.

A Data-Driven Approach To UI Manipulation

Because Vue is primarily ‘data-driven’, which means that what happens on the page is simply a reflection of what happens in the data held by Vue, along with the changes to that data, the Vue instance can be thought of as a syncing agent that simply translates changes in the data held by Vue, to changes in our UI. And by doing so, keeps our data -> view connection ‘in sync’.

An example of this can be seen with the way that view allows us to handle conditional logic on our HTML page.

Below we are displaying or hiding an element within our Vue instance, depending on whether or not data (as a variable within our data object) is set to either true or false.

<div id='app'>
    <h1 v-if="is_it_true">{{ someText }}</h1>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            someText: 'helloThereText',
            is_it_true: true
        },
    });
</script>

In the current way that it is set up (with Vue’s v-if attribute, Vue attributes allow us to add Vue functionality directly to our HTML elements), our h1 shown above will show on page load. With the text ‘helloThereText’.

If we were to change the value held by our is_it_true variable within our data option to false, the h1 will disappear.

This is what we mean when we say that Vue is data-driven. It is driven, and changes on the webpage are made, by what happens in the data that is held by its instances.

The Vue instance, by giving us a simple ‘command center’ where we may set, and when necessary change our data, helps us to unlock the magic that is data-driven Vue.

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


What Is The DOM – (Book Excerpt – From jQuery To VueJS)

Imagine that you just hand-wrote a thousand-word Essay on the oh so glorious language of JavaScript. 

After you had finished that Essay, you decided that you wanted to change the first paragraph’s font color to red. To make it stand out more. 

Now, imagine that you had magical powers. And that you could simply do this by taking your hand, plucking the paragraph with your fingers, rubbing the paragraph in your palm to change the color, and then setting it back down onto the page. Wouldn’t that be awesome (and also a pretty cool party trick)?

This is essentially what the DOM allows you to do with web pages. In the case of the example above, the DOM would be the hand that allows you to pick up, manipulate and drop the elements and/or contents of those elements. 

The DOM is essentially an interactive layer that sits on top of a web page and makes it easier to interact with that page.

Within the DOM the elements and contents that we are referring to are called ‘nodes’. These nodes exist on a tree-like structure, that is best visualized as a flowchart. 

You can see an example of this here: [highlight what the different numbers mean – 9 signals document type, 1 signals an element, 3 signals content, and so on and so forth.]

What we have above is the general flow of a HTML document that is created and represented within the DOM. This is essentially how the DOM ‘sees’ a web page.

It is, essentially, an API for the Web Document, whether that document is in HTML, XML or another compatible format.

The DOM is like the fingers that allow you to pluck, structure and then interact with the elements from a page of an essay you just hand-wrote on a piece of paper, and manipulate them how you want, and then put them back onto the paper. Except in this case, that paper is the web.

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