What do you get with Print?

Instant access to your digital eBook copy whilst your Print order is Shipped

Paperback book shipped to your preferred address

Download this book in EPUB and PDF formats

Access this title in our online reader with advanced features

DRM FREE - Read whenever, wherever and however you want

Implementing Flux Architecture with Vuex

With the Flux concepts clear in our minds, we will now explore the Vuex framework, understand how it works, and, with the help of some examples, see how you can use Vuex inside your Vue applications.

This chapter will cover the following topics:

Vuex at a glance
The boilerplate code that will be used to run the examples
The Vue.js reactivity system explained
Understanding the core concepts of Vuex
Enabling strict mode while developing to prevent accidental direct state modifications
Restrictions in form handling when using Vuex
Simple counter: all the Vuex concepts in a very simple example

The first section introduces you to Vuex, focusing on the concepts behind the framework.

In the second section, you will be presented with a minimal HTML code to run the examples in this chapter.

In the third section, the Vue reactivity system is examined...

Key benefits

Uncover the hidden features of Vuex to build applications that are powerful, consistent, and maintainable

Enforce a Flux-like application architecture in your Vue application

Test your Vuex elements and Vue components using Karma/Jasmine testing framework

Description

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.

What you will learn

Moving from classical MVC to a Flux-like architecture

Implementing predictable centralized state management in your applications using Vuex

Using ECMAScript 6 features for developing a real application

Using webpack in conjunction with Vue single file components

Testing your Vue/Vuex applications using Karma/Jasmine and inject-loader

Simple and effective Test Driven Development

Extending your application with Vuex plugins

What do you get with Print?