DEV Community

loading...
Cover image for Vuex in Vuejs

Vuex in Vuejs

Vuelancer
Developer! Youtube & Scrimba Instructor!
・2 min read
  • 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

<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

Discussion (3)

Collapse
arekx profile image
Aleksandar Panic

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.

Collapse
frondor profile image
Federico Vázquez

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.

Collapse
vuelancer profile image
Vuelancer Author
  • 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!