What is a Vuex Store?

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>
    `
  });

The Original Article can be found on masteringjs.io

#vue #vuex #javascript #programming #web-development