Vuex in Vuejs

#vue #javascript #webdev #beginners

Vuex is a state management library for Vue.js applications. It provides a global or centralized state and it can be accessed in any vue components. State objects can be mutated also. Generally, state is used to store the values, mutations is used to mutate the values stored in store.

Basic Setup

In this example, I haven't used Vue framework setup. Instead, I used vue with HTML.
Include the Vue 3 and Vuex 4 (latest release as of now!) inside the <head> tag.

<head>
<script src="https://unpkg.com/vue@next" defer></script>
<script src="https://unpkg.com/vuex@4.0.0-beta.4/dist/vuex.global.js" 
        defer></script>
</head>

Basic Vue 3 app setup

Vue 3 main component can be created using Vue.createApp(<object_variable>) and then vue app will be mounted to the HTML dom element.

const v1 = {
  // updated soon...
};

var app = Vue.createApp(v1);
app.mount("#container");

Generally, inside vue object we can have data, methods, computed property, hooks like onmounted(), etc.

Vuex Store

Vuex store can be created using Vuex.createStore()


const store = Vuex.createStore({
  state() {
    return {
      // ...
    };
  },
  mutations: {
    // ...
  },
  getters: {
   // ...
  },
  actions: {
    // ...
  }
});

Basic vuex properties

State - data
Mutations - methods
Actions - used to call or commit a mutation (method)
Getters - filtered data

Basic counter application built using vue3 & vuex

Demo - https://vue-vuex.glitch.me

<body>
    <div id="container">
      <h1>
        Vue-Vuex-Counter application
      </h1>
      <p class="counter"> 
         Counter: {{ count }}
      </p>
     <button @click="increment">
       +
      </button>
      <button @click="decrement">
       -
      </button>
      <p>
        {{greater}}
      </p>
    </div>
  </body>

const v1 = {
  computed: {
    count() {
      return store.state.count;
    },
    greater() {
      return store.getters.isGreater;
    }
  },
  methods: {
    increment() {
      store.dispatch("increment");
    },
    decrement() {
      store.dispatch("decrement");
    }
  }
};

const store = Vuex.createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      if (state.count > 0) {
        state.count--;
      }
    }
  },
  getters: {
    isGreater: state => {
      if (state.count > 10) {
        return "Greater than 10";
      } else {
        return "Do increment!!!";
      }
    }
  },
  actions: {
    increment({ commit }) {
      commit("increment");
    },
    decrement({ commit }) {
      commit("decrement");
    }
  }
});

var app = Vue.createApp(v1);
app.use(store);
app.mount("#container");

State objects can be accessed by store.state.<state-object-key-name>
Mutations can be called or commit by store.commit(specific-mutation)
Actions will be dispatched by state.dispatch(action_name)
Getters can be accessed by state.getters.<getters_name>

Some of my youtube videos

Support Me

Top comments (5)

Aleksandar Panic • Sep 26 '20

Keep in mind that unless you know why, you do NOT need vuex. Do not use it just because someone says you need to. You will know when you need it. If you are not sure then just implement store using pure vue. It will pay off in the long run.

Federico Vázquez • Sep 26 '20

But... You're not using Vue 3!
I mean, yes, you may import that version number but you aren't using any of its features. I don't know, maybe some examples using composition API and redux, a better scaffolding/design.

Vuelancer • Sep 26 '20

Actually I haven't started vue 3 to develop vue app. This is the first app I used to learn it!
Thank you for this response. If you know any resources to learn vue 3, do share it dude!