gnikyt Code ramblings.

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 = => 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 => => 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.