30-days-cover-image

30 Days of Vue

Simple Global Store

 

This post is part of the series 30 Days of Vue.

In this series, we're starting from the very basics and walk through everything you need to know to get started with Vue. If you've ever wanted to learn Vue, this is the place to start!

Simple Global Store

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.

src/simple-global-store-example/src/store.js
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:

src/simple-global-store-example/src/components/NumberDisplay.vue
<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:

src/simple-global-store-example/src/components/NumberSubmit.vue
<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.

 

This page is a preview of 30 Days of Vue

Get the rest of this chapter and 330+ pages of Vue instruction for free.

The entire source code for this tutorial series can be found in the GitHub repo, which includes all the styles and code samples.

If at any point you feel stuck, have further questions, feel free to reach out to us by:

Get Started Now Background Image

Get started now

Join us on our 30-day journey in Vue. Join thousands of other professional Vue developers and learn one of the most powerful web application development frameworks available today.

No spam ever. Easy to unsubscribe.