18

Large Application Patterns with

Vuex

In this chapter, we'll cover the following recipes:

Dynamically loading pages in your vue-router

Building a simple storage for the application state

Understanding Vuex mutations

Listing your actions in Vuex

Separating concerns with modules

Building getters to help retrieve your data

Testing your store

Introduction

In this chapter, you will learn how Vuex works and how to use it to support a scalable

application. Vuex implements a pattern that is popular in frontend frameworks and
consists of dividing the different concerns to manage a big global application state. The

mutations are the only things that can change the state, so you have only one place to look
for that. Much of the logic, along with all the asynchronous logic, is contained in the

actions; finally, getters and modules further help to spread the cognitive load when it

comes to computing the derived state and splitting your code into different files.

Along with recipes, you will find grains of wisdom that I found useful when developing

real large applications; some have to do with naming conventions and others with little
tricks to avoid bugs.

If you complete all the recipes, you will be ready to develop big frontend applications with

fewer bugs and seamless collaboration.