What is State Management? Hands-On Vuex for clean Nuxt.js Applications.

A beginner’s guide to Vuex. Free Code provided.

What is Vuex?

The definition of Vuex in the document is “state management pattern” which is an unclear description. What is Vuex? The best answer to this question is to know the problem that Vuex designed to solve. Vuex and other similar libraries like Redux both formed by the Flux pattern. So what is the Flux pattern? The Facebook developers create an application architecture named “Flux”. Flux is designed for debugging the “zombie notification” on Facebook a few years ago. Which solve the problems generated by the MVC pattern which is an old way to manage the data.

In the beginning: MVC, an old way to manage data

example

Sometimes the notification bar will send buggy notifications. When users open an unread notification will find out it is just a message they’ve already read. This usually happened when components need to communicate horizontally. For example, in below picture shows that it is complicated to debug when component C communicated with component E. In the traditional solution would be making events to sent up and making props to sent down the message. This problem also named as cascading effect — One component triggers updates to multiple other components.

The Core Problems: One component triggers updates to multiple other components

Hard to debug

Number of the components effect size of chain

This way to manage data named MVC. MVC basically created to ensure there is the separation of concern between the three core mechanics of the application.

1. View layer

2. Data layer

3. Controller

What is Flux? A new way to manage data

MVC is really good with a single component or several components that work independently. As soon as we start to have interconnected components we start to create cascading effect. This scenario inspired developers from Facebook to invent the pattern Flux. Having a clear application architecture that provides only one direction data flow which is a new way to manage the data. The main idea of Flux is to get the updated data, not all the changes. The below pictures show the different way MVC and Flux pattern managing the data.

MVC

FLUX

It separates a lot of block of coding in the file store. Keeping the project clean and easy for debugging. The one-way data flow starting from makes sure every action responded by updating the file store. Using this way to organize lots of components is really smart. Components retrieve the data they need from several store files, then communicate based on the component tree. This solves the traditional component tree complexity and reducing the false.

Flux Concept

Nuxt.js contains the Vuex Store files

With the basic knowledge of the Flux pattern, now we could focus on Vuex which is based on the Flux. The Vuex Store comes with Nuxt.js out of the box but is disabled by default. Just add an index.js in the store folder that will active the Vuex. Everything under the Nuxt project goes automatic and easy.

Store

The store contains the model/state. The store contains the logic to change its states which is a list of mutations called Action Handlers. Store listen and react to Action creators. The store is the only place in the app where the state is kept.

Vuex pattern: What happened in the Store

Flux pattern: What happened in Store, View and Action Creators

Basically, Store is Event-based. And the Action creator is the part of how we glue all the stuff together. A bunch of functions be dispatched when we need it. Action creator dispatches the Action and Store listen to Action. Store commit it in Action handlers which contain lots of mutations to mutate the state. As state be mutated Store notifies View to react.

Real wold example in Nuxt app

In my personal portfolio website app, my vision is to amaze my clients and make them want to cooperate with me. With this vision, my functional spec would be easy to edit and speedy loading. The most relevant element would be ‘my projects’. This element used in so many ways on the website. On the main page, portfolio display blocks, slug for the dynamic project pages, related project button and the tag for work.

1. create the state, a function return data — Create an object to represent the state, the state of data
2. access the state — this.$store.state
3. create the mutation, an object contains lots of mutations—To change the state. The mutation handler function always receives state as the first argument and receives a second payload argument if there is one.
4. trigger the mutation(the change of state) — by commit(‘theNameOftheMutation’) could be in actions or methods. When it triggered in methods, remember to return the value.
5. create some actions
6. create some getter

sourrain/sourrain-portfolio

Thank You

I hope you have a lovely reading and coding journey. Feel free to share this article with anyone who is struggling with Nuxt.js like me. If you have further questions, you are welcome to discuss them down here. Also, I am active on IG: sourrain_art. See ya!

Thanks for supporting me!

Documents and Sources

What is Vuex? | Vuex

store

WTF is Vuex? A Beginner’s Guide To Vue’s Application Data Store