Vuex & Data - Keeping it clean

Introduction

Vuex is a state management library, centralized storage of data for your whole application. It’s well documented, beautiful, and easy to use with Vue. The part I want to talk about today is the data portion.

I have increasingly seen cases where the data state of Vuex gets transformed and represents something more than just plain-old data ; that’s a problem in the long run.

The Problem

A simple example…

Step 1

An external API request is sent out through an action to get a list of books.

Step 2

That book data is then sent to the mutation handler where the developer would map the data to a model class: const bookCollection = books.map(book => new Book(book));.

Step 3

This transformed data gets committed to the state afterwards with state.books = bookCollection;.

All-Together

At first, this seems convenient to the developer, because in any part of their code, they can utilize their models such as: const authorsNotOnSale = state.books.filter(book => !book.isOnSale()).map(book => book.getAuthor()).

But, what happens when you want to serialize that data to JSON? Store it somewhere else outside of Vuex? Such as using a library like vuex-persist?

You’ll immediately loose all those nice model functions you’ve built out and you can not easily restore the state because its more than just data at this point.

The Solution

The proper solution would be to utilize Vuex getters to transform that data into something more usable in your application.

const bookCollection = state => state.books.map(book => new Book(book));

Keep the data clean, lean, and plain. Think of the data this way: can I serialize this? If the answer is no, you may need to dig into why.