Vuex Keeps Your Vue.js Components Under Control

In the early days of web development, we dealt with stateless entities. My first web programs were JSP and Servlets. Each time we hit the server you had to ensure the users were authorized.

Today we have frameworks to handle that. State management is expected in any web framework. No one wants to go back to writing that code, I can assure you of that!

Vuex

As I learn more about the Vue.js world I see the need for state management. The components must coordinate information easily. Vuex is defined on its website as:

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

This makes it easier for developers to focus on solutions instead of worrying about basic plumbing. Let’s clear up what we mean about this pattern.

State Management Pattern

Dipping our toe in the reactive world we run into state issues. The world of components needs to coordinate activity. According to AOE they define this as:

State Management is a design pattern with the goal of efficiently sharing state data across components while separating domain representation from state management.

In the Vue.js world Vuex handles this orchestration. In comparison, the React world has Redux. This common challenge has to be handled by the framework.

Pinia

Pinia is the new version of the store library for Vue. It allows you to share state across components and pages. Pinia provides a timeline to track actions and mutations.

Install Vuex

You can start with the following line to install Vuex into existing Vue applications.

npm install vuex@next --save

This will install the correct version of Vuex and update the package.json file.

Create an index.js file inside the src/data folder.

import { createStore } from 'vuex'

export default createStore({
  
})

Then modify the main.js file to look like the following:

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

This is bundling the store data for Vuex.

Then we can add the objects and values for the store.

import { createStore } from 'vuex'

export default createStore({
state: {
    firstName: 'John',
    lastName: 'Doe'
  },
mutations: {

},
actions: {

},
getters: {

}
})

This will get us ready for mutations, actions, and getters.

We can modify the App.vue to use the store.

<template>
  <div class="wrapper">
    <p>{{ $store.state.firstName }} {{ $store.state.lastName }}</p>
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" />
    </div>
  </div>
</template>
...

That should outline the basics to get Vuex installed. Check out the code used for this demonstration here.

In conclusion, State Management is required to keep things together. We talked about the basics of Vuex and how it fits in the Vue.js landscape. Pinia is the next iteration in the Vuex lifecycle. Then we reviewed the highlighted setting up Vuex. If you want to go deeper with Vuex check out this post from Adam Jahr.