[Vue3] Vuex Usage

Vuex is a library that helps create centralized repositories to manage data and state.

Create a Project

Let's create a project for vuex.

2021.06.02 - [Web/JavaScript] - [Vue3] Getting Started with Vue3 + TypeScript + TailwindCSS

Installing Vuex

$ vue add vuex

You just type this command if you want to use vuex.

You can also set it in the create a project stage.

Creating Store

The store is a reactive container.

Let's add counter example into the store.

 

store/index.ts

import { createStore } from "vuex";

export interface IStore {
  count: number;
}

export default createStore<IStore>({
  state: () => {
    return { count: 0 };
  },
  mutations: {
    increase(state) {
      state.count++;
    },
    decrease(state) {
      state.count--;
    },
  },
  actions: {},
  modules: {},
});

It has one state and two mutations.

Using Store

components/Helloworld.vue

<template>
  <div>
    <div class="mb-4 text-3xl">{{ count }}</div>
    <button
      @click="decrease"
      class="w-20 border border-gray-700 rounded-l text-2xl focus:outline-none"
    >
      -
    </button>
    <button
      @click="increase"
      class="w-20 border border-gray-700 rounded-r text-2xl focus:outline-none"
    >
      +
    </button>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  name: "HelloWorld",
  setup: function () {
    const store = useStore();
    const count = computed(() => store.state.count);
    return { store, count };
  },
  methods: {
    increase() {
      this.store.commit("increase");
    },
    decrease() {
      this.store.commit("decrease");
    },
  },
});
</script>

We can use store with useStore().

And we can access state variables using store.state.

Vuex doesn't allow to directly change the state of the store.

Therefore, if we want to change the state of the store, we have to use mutations and commit().

Mutations synchronously handle the state of the store.

 

Let's test this.

 

App.vue

<template>
  <HelloWorld />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue";

export default defineComponent({
  name: "App",
  components: {
    HelloWorld,
  },
});
</script>

It works well.

Getters

We can easily get data from the store using getter.

Let's add getters into our store.

import { createStore } from "vuex";

export interface IStore {
  count: number;
}

export default createStore<IStore>({
  state: () => {
    ...
  },
  mutations: {
    ...
  },
  getters: {
    square: (state) => {
      return state.count * state.count;
    },
  },
  actions: {},
  modules: {},
});

export default defineComponent({
  name: "HelloWorld",
  setup: function () {
    const store = useStore();
    const count = computed(() => store.state.count);
    const squaredOfCount = computed(() => store.getters.square);
    return { store, count, squaredOfCount };
  },
  methods: {
    ...
  },
});

Focus on the getters! It's so easy to understand.

Render and test this.

Actions

Unlike mutations, actions handles asynchronously.

Actions can call several mutations as well.

Let's make actions.

import { createStore } from "vuex";

export interface IStore {
  count: number;
}

export default createStore<IStore>({
  state: () => {
    ...
  },
  mutations: {
    ...
  },
  getters: {
    ...
  },
  actions: {
    increase: (context) => {
      context.commit("increase");
    },
    decrease: (context) => {
      context.commit("decrease");
    },
  },
  modules: {},
});

export default defineComponent({
  name: "HelloWorld",
  setup: function () {
    ...
  },
  methods: {
    increase() {
      this.store.dispatch("increase");
    },
    decrease() {
      this.store.dispatch("decrease");
    },
  },
});

Actions is used with dispatch().

It works the same as previous.

Conclusion

We now know what is the vuex and how to use it.

We can also know store, getters, mutations, actions and how to use them.