Vuex-State management library for Vue(Vue2 and Vue3)
Tags: vue, javascript, webdev
Published: 2021-10-28 14:17:57

Vuex is a state management library for Vue. As your application continues to grow it becomes tough to handle many things.This is for someone who already knows Vue.If not please have a look at some of my previous blogs [VueJSforBeginners](https://dev.to/tanzimibthesam/intro-to-vuejs-for-beginners-1-2ll1)
**Note this same thing works with both Vue2 n Vue3 APi since Vue2 APi perfectly works in Vue3 but there is just a slight change which I will mention after all these**
*Vuex3 with Vue2*
**Install Vuex**
After you have installed the project run
`npm install vuex`
**index.js**
We need to make a new store and here and we need to write `store:store`
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wg89vp51r2b6jaqjrn09.png)
 here need to write about the store here
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jy5ij9u525tr1o0nbofq.png)
If we look at the console we see so many things of the store 
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8bpw7a4e823g9f9nht0.png)
**Mutations**
You can't mutate a state directly you need mutations, For mutating you to access the mutations 
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4ztsc1cynp4r5k5d762.png)
If we look at the Vue dev tools in the console
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdlumk97o2fzigfxprk0.png)
Here we see 3 of the mutations increment 
**2. Transfer to store.js**
Here we are transferring everything to store.js so that everything is in a seperate file which is much more readable 
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2558j7pwpe1upl14e3xx.png)
**As the mark is given we must default export store at the botton**
`In App.vue`
Here we need to import 
 `import store from './store'`
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcq8vnftfrsqcqpchd0q.png)
**No need to import store now if we use $this.store**
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77z696n1ayv5iewqf3rz.png)
**Display Todos**
Here we take an array of objects todos in store and we want to loop through it
**IN store.js**
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2a3nuch5ouwipx8sq7ck.png)
**In App.vue**
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjqkrs2d1fk34r3xbq24.png)
**template part in App.vue**
Looping through array of objects
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtnm8j03mysxhnyix1z1.png)
**mapState** 
Here we can use mapState to get access to all of the state. Its much easier
 **In store.js**
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1u6nvfwurhn60plcfcbd.png)
 
*In App.vue*
`import {mapState} from 'vuex'`
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysred8flj50wikzkj4jh.png)
 We see now we can easily have access to todos and isLoggedIn vis mapState
**getters**
We can access any property of state through mapState on the other hand if we want to filter out todos based on done and not done for that we need to use `getters`
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzfpthmu9xpciql5lphv.png)
**App.vue**
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itno5c815djrs7ototae.png)
**template part**
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iaxfjy5r9ysxt42b89yl.png)
 `in the browser`
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/10qvazozxthgkmfwvqpa.png)
*getters inside getters*
**in store.js**
Suppose we want to get length of allTodos so here we can find out length of allTodos
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgs7w3c4e3kin2gw5rov.png)
 
 **In App.vue**
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqvm2vhx6v6azdpqzui0.png)
 **In browser**
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3equ8n3bk4f5654kgx0w.png)
**mapGetters**
Here we can just use `mapGetters` import `mapGetters` on the top.By this have all getters easily.
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zemk0gb4prlgy29y393z.png)
  
**Mutation and action**
Suppose we want to set both methods to increase and decreaseCounter.Here we will have to set two methods one is increase and other is decrease
**In store.js**
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hikj9fxsuan88x0e4kk2.png)
Here the mutations are commited in actions
**In App.vue**
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agz0spfmvtfbjmyn76cq.png)
Here we see we dispatch the actions

**template part**
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omzv64ehzzgwi78wpatp.png)
**mapActions**
Just Like `mapGetters` we can use `mapActions` 
we need to import `mapActions` at the top 
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/seyr54gtu3bglsnhljrg.png)
 
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14ewn36jxz6puvmntzem.png)
*Vuex3 with Vue2*

Here I am going to talk about how you will install `Vuex4` wih `Vue3`.Remeber `Vuex4` only works with `Vue3` However `Vuex3` works works with both.

**Install Vuex4**
`npm install vuex@next`
In `package.json` dependencies if you see now its `vuex4.0.2`
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfzg8e9mckiychdkypoh.png)
 
`main.js`
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b22dlroip8j4jn43ugr6.png)
`store/index.js`
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1qdspim8w9n4wuvpkig.png)
![Imagedescription](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mqqr3r5i11rvh3bfo7yg.png)
**Remember to export store**
My way of writing it might differ from other but main things is the code working. So I believe you can now work with `Vuex`
with latest `Vue3` Api.