DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Vuex in Vuejs
Vuelancer
Vuelancer

Posted on

Vuex in Vuejs

  • 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

Top comments (5)

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!
Collapse
 
jim_smithson_0b55382ec327 profile image
JIm Smithson

I was able to use this code. It was ok for certain situations: Dumpster Rental Dayton OH and
Duct Cleaning Cincinnati OH

Collapse
 
marie789ux profile image
marie789-ux

Thanks for the update, keep it up!
curatedleads.org/contractor-websit...

This post blew up on DEV in 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!