Vuex in Vuejs
Tags: vue, javascript, webdev, beginners
Published: 2020-09-26 09:35:31

* 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.
``` javascript
<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.

``` javascript
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()`

```Javascript

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

``` HTML
<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>
```

``` Javascript
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
{% youtube moa9lr7MfoA %}
{% youtube Tdx8RBmvqiQ %}
{% youtube x0Boemw9teU %}
{% youtube _1tpxFcpCBI %}

### Support Me
* [Youtube - Vuelancer](https://www.youtube.com/channel/UC0hmXRqXYVO0mocVt5D3GkQ)

* [Github - Vuelancer](https://github.com/vuelancer)

* [Scrimba](https://scrimba.com/@selvakumardhivakar)

* [Vuelancer - Patreon](https://patreon.com/vuelancer)