State Management with Vuex

A program is considered to be stateful if it remembers actions and can recall them later. Think of a shopping cart on a website. When you add something to your cart the application remembers which and the quantity of items in your cart. Throughout the remainder of the user’s session this information can be recalled anytime you view your cart. This is what we call a stateful application.

In our last lesson we built a router for your Vue.js application. Each of the routes have their own components. The protocol is to keep these as loosely coupled as possible. Data needed to be shared gets passed between components via interfaces. Now think back to our shopping cart example. This is not something you would want to be passing between components for every transition. Conversely we don’t want to end up with a clutter of data stored globally.

Enter state management. A state management library can store data centrally in our application allowing it to be accessed across components and routes. It manages changes to this state through mutations and actions ensuring all data be modified in a controlled manner. Lets take our application from our last lesson and add in a state management library. We will be focusing on Vuex here because it is tailored specifically for Vue. Start by installing Vuex in our project. Run the following command from your applications directory:

npm install vuex --save

Now create a new folder within your application’s src directory. We’ll call it store and add in a file called store.js. This will be where we store all of our state management functionality. If you have been following along since the last lesson your directory structure should look something like this:

The store.js is going to contain our:

• state: a single object for storing data that will be used throughout the application
• getters: computed properties based off of data in the store
• mutations: methods used for modifying your state

It also contains actions and modules. More on that later. For now lets look at our store.js:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
    state: {
      cartItems: 0
    },
    getters: {
      getItems: state => {
        return state.cartItems;
      }
    },
    mutations: {
      increment (state){
        state.cartItems++
      }
    }
})

Here we created a state with a value of cartItems representing how many items we currently have in the shopping cart. We have a getter for returning the number of cart items, and lastly we have a mutation for incrementing the number of items in the cart. The next step is to import our store into our Vue app and include it in our Vue instance. Update your main.js from your src directory:

// other import statements
import { store } from './store/store'
...
new Vue({
  el: '#app',
  router,
  store: store,
  components: { App },
  template: '<App/>'
})

This exposes the store to our other components. These components will have access to the core data, any getters, as well as mutations. With our store in place and added into our instance we can now reference it in our components. Note that this does not preclude us from using values from the local state. Here is what our modified component looks like in Test.vue

export default {
  name: 'Test',
  data () {
    return {
      name: 'John Smith',
      city: 'Charlotte, NC'
    }
  },
  computed: {
    getCounter() {
      return this.$store.getters.getCounter;
    },
  },
  created: function(){
    this.$store.commit('increment');
  }
}

Note the computed and created methods. In order to access the store we created in the earlier steps we need to reference:

this.$store 

Also, quick sidebar, created is what we call a lifecycle hook. Lifecycle hooks make it convenient for us execute some bit of code when a component is initialization (created, updated, mounted), updated, or destroyed.

With this in place we can now make reference to these functions in the template just the same as in our previous lesson:

<template>
  <div>
    ...
    <p> Welcome {{name}} from {{city}} </p>
    <p> Number of items in cart are: {{getCounter}} </p>
  </div>
</template>

From there you can add other references to state in your remaining components easily keeping data synced up throughout your application. Our Vue DevTools have a Vuex tab that gives us transparency into the state and all of it’s respective interfaces.

Having the ability to manage state across components in your application is critical to building scalable code. I hope this grounds you on how state is managed in Vue and gets you off to a good start. As always I encourage questions / feedback in the comments and on twitter @ignoreinution.

References

Introduction · Vuex

The Vue Instance - Vue.js

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.