6

Caching the Current Folder

Structure Using Vuex

In this chapter, we are going to introduce an official Vue plugin called Vuex. Vuex is a state
management pattern and library that allows you to have a centralized store for all your Vue

components, irrelevant of whether they are child components or a Vue instance. It gives us
a centralized, simple way of keeping our data in sync across the whole app.

This chapter is going to cover:

Getting started with Vuex

Storing and retrieving data from the Vuex store

Integrating Vuex with our Dropbox app

Caching the current Dropbox folder contents and loading data from the store if

required

Instead of requiring custom events and the $emit functions on every component, and

trying to keep components and child components up to date, every part of your Vue app

can update the central store, and others can react and update their data and state based on
that information. It also gives us a common place to store data so, rather than trying to

decide whether it is more semantic to place the data object on the component, a parent
component, or the Vue instance, we can use the Vuex store.

Vuex is also integrated into the Vue dev tools—something that is covered in Chapter

12 , Using Vue Dev Tools and Testing Your SPA. With the integration of the library, it makes

debugging and viewing the current and past states of the store easy. The dev tools reflect

state changes, or data updates, and allow you to inspect each part of the store.