How to Use Simple Global Store for Vue State Management

#

Yesterday, we gathered an understanding of how a global EventBus can use its events interface to have isolated components communicate with one another. Today, we’ll see how a Simple Global Store can be a more useful approach to handling state management.

Though an EventBus is easy to set up - the significant disadvantage behind using one is the difficulty in being able to track data changes appropriately. In today's article, we’ll be looking at how a Simple Global Store can be used to handle state management in a more robust manner.

Simple Global Store

#

The term state management is used quite a bit. State basically means data. State management often refers to the management of application level data.

Simple state management can be performed by creating a store pattern that involves sharing a data store between components. The store can manage the state of our application as well as the methods that are responsible in changing the state.

As an example, let’s adapt the code samples we’ve seen in the last article and look to create a store that will help us in this case. We can create a store.js file in the src/ folder that exports a store object (which contains a state object within):

export const store = {
  state: {
    numbers: [1, 2, 3]
  }
};

The numbers array in our store will be the array that needs to be either displayed or manipulated from more than one component. When it comes to changing this numbers array - we can look to keep our store centralized by adding all the methods (i.e. mutations) that can be done on the store state in the store itself.

To mimic the interaction we had in the last article, we’ll introduce an addNumber method to the store that accepts a payload and directly updates the state.numbers value with that payload.

export const store = {
  state: {
    numbers: [1, 2, 3]
  },
  addNumber(newNumber) {
    this.state.numbers.push(newNumber);
  }
};

We can now have a NumberDisplay component that’s responsible in displaying the numbers array from the store:

<template>
  <div>
    <h2>{{ storeState.numbers }}</h2>
  </div>
</template>

<script>
import { store } from "../store.js";

export default {
  name: "NumberDisplay",
  data() {
    return {
      storeState: store.state
    };
  }
};
</script>

A NumberSubmit component will allow the user to add a new number to our store numbers data array:

<template>
  <div>
    <input v-model="numberInput" type="number" />
    <button @click="addNumber(numberInput)">
     Add new number
    </button>
  </div>
</template>

<script>
import { store } from "../store.js";

export default {
  name: "NumberSubmit",
  data() {
    return {
      numberInput: 0
    };
  },
  methods: {
    addNumber(numberInput) {
      store.addNumber(Number(numberInput));
    }
  }
};
</script>

The NumberSubmit component has an addNumber() method that calls the store.addNumber() mutation and passes the expected payload.

The store method receives the payload and directly mutates the store.numbers array. Thanks to Vue’s reactivity, whenever the numbers array in store state gets changed, the relevant DOM that depends on this value (<template> of NumberDisplay) automatically updates. This is because the NumberDisplay storeState data value is equivalent to the store.state object. When store.state changes, NumberDisplay storeState changes, and the template of NumberDisplay therefore re-renders.