What is a Vuex Store?

Nov 11, 2020

A Vuex Store is the fundamental object in Vuex. A store wraps your app's state in a convenient object and gives you access to powerful features and patterns, like mutations and getters.

Creating a Store

Vuex exports a Store class. So you can use require() in Node.js, or ESM import to pull in Vuex, and create a new store:

const Vuex = require('vuex');

// Equivalent:
import Vuex from 'vuex';

// Create a new store:
const store = new Vuex.Store({
  state: {
    count: 0
  }
});

You can also load Vuex via a script tag from a CDN like unpkg:

<script src="https://unpkg.com/vuex/dist/vuex.js"></script>
<script>
  const store = new Vuex.Store({
    state: {
      count: 0
    }
  });
</script>

Using a Store

You experiment with Vuex in Node.js without using Vue at all. For example, here's how you can create a new store and print the current state.

const Vuex = require('vuex');

const store = new Vuex.Store({
  state: { count: 0 }
});

store.state; // { count: 0 }

The canonical way to modify a Vuex store's state is via a mutation. You should not modify the state property directly. Below is how you can define mutations that increment and decrement the count property:

const Vuex = require('vuex');

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment: store => store.count += 1,
    decrement: store => store.count -= 1
  }
});

store.state; // { count: 0 }

store.commit('increment');
store.state; // { count: 1 }

store.commit('decrement');
store.state; // { count: 0 }

Although you can access a Vuex store's state directly with store.state, you typically wouldn't do that in a Vue app. That's because accessing store.state directly doesn't tie in to Vue's reactivity properly. Instead, you would define a Vuex getter.

const Vuex = require('vuex');

const store = new Vuex.Store({
  state: { count: 0 },
  getters: {
    count: store => store.count
  },
  mutations: {
    increment: store => store.count += 1,
    decrement: store => store.count -= 1
  }
});

store.getters.count; // 0

store.commit('increment');
store.getters.count; // 1

Adding the Store to Your App

In order to wire up your Vue app to use Vuex, you need to do two things:

  1. Call Vue.use(Vuex) before you define your app.
  2. Create a store and pass it to the Vue constructor. For example, new Vue({ store, computed, template })

For example, below is how you can wire up a Vue instance to use the count store:

  Vue.use(Vuex);

  const store = new Vuex.Store({
    state: { count: 0 },
    getters: {
      count: state => state.count
    },
    mutations: {
      increment: store => store.count += 1,
      decrement: store => store.count -= 1
    }
  });

  const app = new Vue({
    store,
    computed: {
      count: function() {
        return this.$store.getters.count;
      }
    },
    template: `
      <div>
        <h1>{{count}}</h1>
        <button v-on:click="$store.commit('increment')" id="increment">
          Increment
        </button>
        <button v-on:click="$store.commit('decrement')" id="decrement">
          Decrement
        </button>
      </div>
    `
  });

Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!