How to use vuex in vue.js 3.4.1

### Introduction
In this article I will discuss about how we can use vuex in a nutshell. So before we get our hand dirty we should talk a little bit about flux design pattern.

### Flux
Flux is known as the concept of Unidirectional data flow. It is developed by Facebook while they are working with React. This Vuex pattern will illustrate on how flux work in Vue.js.

Typically, Flux has some individual components as listed below:

- <b>Action :</b> Helper method that facilitate passing the data to dispatcher.
- <b>Dispatcher :</b> Receives actions and broadcast payload to registered callback.
- <b>Stores :</b> Containers for application state & logic that have callback registered to the dispatcher.
- <b>Controller Views :</b> React component that grab the state from <b>Stores</b> and pass it down via props to child components.

![V70cSEC.png](https://qiita-image-store.s3.amazonaws.com/0/211892/5b8e4922-0105-f8ab-439b-17332c36c6d0.png)

### Vuex
- Create new Vue.js project
    We will use vue cli for creating new project. In case you don't have vue cli install, please enter this command in your terminal

```terminal
npm install -g @vue/cli
```
To create new vue project we have to enter this command:

```terminal
vue create my-project
```
It will ask some questions for the project configuration setting. So just choose what ever you like such as test framework and so on.

- Create a new view component call <b>Counter.vue</b> and add this following code:

```vue
<template>
    <figure>
        <button @click="decrement">-</button>
        <span>{{ $store.state.count }}</span>
        <button @click="increment">+</button>
    </figure>
</template>

<script>
export default {
    name: 'Counter',
    methods: {

        // component method handling increment store dispatch action
        increment: function (event) {
            this.$store.dispatch('increment')
        },

        // component method handing decrement store dispatch action
        decrement: function (event) {
            this.$store.dispatch('decrement')
        }

    }
}
</script>

<style>
    span {
        padding: 0 10px;
    }
</style>
```

- In <b>store.js</b> add this following code:

```javascript
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {

    INCREMENT (state) {
      state.count++
    },

    DECREMENT (state) {
      state.count--
    }

  },
  actions: {

    increment ({ commit }) {
      commit('INCREMENT')
    },

    decrement ({ commit }) {
      commit('DECREMENT')
    }

  }
})
```
- Now in <b>router.js</b> update home route to match with <b>Counter</b> view component

```javascript
   {
      path: '/',
      name: 'counter',
      component: () => import('./views/Counter.vue')
    }
```

Basically we have two actions in our store which are <b>increment</b> and <b>decrement</b> each action send signal to mutations and mutate the state value. 

In <b>Counter.vue</b> we bind the value from the state with the respective UI component. That's what we call <b>Controller View</b> in flux.

So this is a short demonstration on how we can use vuex in Vue.js. If you have any further concern or suggestion please email me (phanithken@gmail.com) or leave the comment down bellow. I will try to answer.

And I also put all the sample into Github which you can check it out <a href="https://github.com/phanithken/vuex-sample">here</a>
Thank you! Have a nice day :)