Book Image

Vuex Quick Start Guide

By : Andrea Koutifaris
Book Image

Vuex Quick Start Guide

By: Andrea Koutifaris

Overview of this book

State management preserves the state of controls in a user interface. Vuex is a state management tool for Vue.js that makes the architecture easier to understand, maintain and evolve. This book is the easiest way to get started with Vuex to improve your Vue.js application architecture and overall user experience. Our book begins by explaining the problem that Vuex solves, and how it helps your applications. You will learn about the Vuex core concepts, including the Vuex store, changing application state, carrying out asynchronous operations and persisting state changes, all with an eye to scalability. You will learn how to test Vuex elements and Vue components with the Karma and Jasmine testing frameworks. You will see this in the context of a testing first approach, following the fundamentals of Test Driven Development. TDD will help you to identify which components need testing and how to test them. You will build a full Vuex application by creating the application components and services, and persist the state. Vuex comes with a plugin system that allows programmers to extend Vuex features. You will learn about some of the most powerful plugins, and make use of the built-in logger plugin. You write a custom Google Analytics plugin to send actions to its analytics API, and an Undo/Redo plugin.
Table of Contents (8 chapters)

MVC problems and the Flux solution

Each time we speak about an application with a user interface, the MVC pattern comes out. But what is the MVC pattern? It is an architectural pattern that divides components into three parts: a Model, a View, and a Controller. You can see the classic diagram describing MVC in the following figure:

Figure 1.0: Classic MVC diagram

Most of the modern frameworks for progressive web applications use the MVC pattern. In fact, if you look at the Vue.js single file component shown in the following figure, you can clearly see the three parts of the MVC pattern:

Figure 1.1: Vue.js single file component

The template and style parts represent the view section, the script part provides the controller, and the data section of the controller is the model.

But what happens when we need some data from the model of a component that's inside another component? Moreover, in general, how can we interconnect all the components of a page?

Clearly, providing direct access to the model of the components from other components is not a good idea. The following screenshot shows the dependencies in the case of exposing the models:

Figure 1.2: MVC hell

Vue.js provides a good way of communicating between parent and child components: You can use Props to pass values from a parent to a child component, and you can emit data from a child component to its parent. The following figure shows a visual representation of this concept:

Figure 1.3: Vue.js parent–child communication

However, when multiple components share a common state, this way of communicating is not enough. The following are the issues that would come up:

  • Multiple views may share the same piece of state
  • User actions from different views may need to change the same piece of state

Some frameworks provide a component called EventBus; in fact, the Vue instance itself is an EventBus. It has two methods: Vue.$emit(event, [eventData]) and Vue.$on(event, callback([eventData])). The following is an example of how to create a global event bus:

// EventBus.js
Vue from 'vue';
export const EventBus = new Vue();

// HelloWorldEmitter.js
import { EventBus } from './EventBus.js';
EventBus.$emit('an-event', 'Hello world');

// HelloWorldReceiver.js
import { EventBus } from './EventBus.js';
EventBus.$on('an-event', eventData => {

Even with a global event bus, making components communicate is not easy. What if a component that registers to an event gets loaded after the event is fired? It will miss the event. This may happen if that component is inside a module that gets loaded later, which is likely to happen in a progressive web app where modules are lazily loaded.

For example, say that a user wants to add a product to the cart list. She taps on the Add to cart button, which is likely to be in the CartList component, and she expects the product she sees on the screen to be saved in the cart. How can the CartList component find out what the product is that should be added to its list?

Well, it seems that Facebook programmers faced similar problems, and to solve those problems, they designed what they called Flux: Application architecture for building user interfaces.

Inspired by Flux and Elm architecture, Evan You, the author of Vue.js, created Vuex. You may know Redux already. In that case, you will find that Vuex and Redux are similar, and that Evan You saved us time by implementing Vuex instead of forcing every programmer to integrate Redux inside a Vue.js application. In addition, Vuex is designed around Vue.js to provide the best integration between the two frameworks.

But what is Vuex? That is the topic of the next section.