DEV Community

loading...

Basic Vuex Store Example

aumayeung profile image John Au-Yeung Originally published at thewebdev.info ・3 min read

Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62

Subscribe to my email list now at http://jauyeung.net/subscribe/

Vuex is one state management that's made to work with Vue apps.

To use it, we install it by running:

npm i vuex
Enter fullscreen mode Exit fullscreen mode

Then we can register the Vuex plugin and create a basic Vuex store with:

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";

Vue.use(Vuex);

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

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");
Enter fullscreen mode Exit fullscreen mode

The store is created with the Vuex.Store constructor:"

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

The object we passed into the constructor has the state property with the count state inside it.

The initial value of count is 0.

The mutations property has methods that change the state.

We have the increment method which takes the state parameter.

It has the same content as the state property above it.

So we can run state.count++ to increment the value of the count state.

To make the store available to the rest of our app, we put store into the object we passed into the Vue constructor.

Then in a component, we can use the store as follows:

<template>
  <div id="app">
    <button @click="increment">Increment</button>
    <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  }
};
</script>
Enter fullscreen mode Exit fullscreen mode

We have this.$store, which is the Vuex store. We have this object since we registered the Vuex plugin and put the store into the object we passed into the Vue constructor.

this.$store.state.count has the count state's value.

And this.$store.commit lets us commit values to the store.

The 'increment' indicates that we call the increment method in the mutations property in the object we pass into the Vuex.Store constructor.

We also have an Increment button to call increment.

Now when we click the button, we'll see the count value displayed below the button go up.

The commit method takes a 2nd argument, which is the payload.

So we can write:

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";

Vue.use(Vuex);

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

Vue.config.productionTip = false;

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");
Enter fullscreen mode Exit fullscreen mode

and write:

<template>
  <div id="app">
    <button @click="increment">Increment</button>
    <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit("increment", 2);
    }
  }
};
</script>
Enter fullscreen mode Exit fullscreen mode

to increment by 2 instead of 1 when we click.

We have:

this.$store.commit("increment", 2);
Enter fullscreen mode Exit fullscreen mode

instead of:

this.$store.commit("increment");
Enter fullscreen mode Exit fullscreen mode

and:

mutations: {
  increment(state, payload) {
   state.count += payload;
  }
}
Enter fullscreen mode Exit fullscreen mode

instead of:

mutations: {
  increment(state,) {
    state.count ++;
  }
}
Enter fullscreen mode Exit fullscreen mode

payload is the 2 we passed in.

A basic Vuex store can let us store an app-wide state easily.

We just have to commit mutations to set the state and get the state from the store via the $this.store.state property.

We can return the latest value in the computed property so we can use it.

Discussion (0)

pic
Editor guide