Vuex — State Management

Lets first understand what is state?

💡In Simple words we can say it is current data which needed to our component to render it on screen.

We can share data between the components by using events and props.

For large application these tree structure handling will get complicated, so we can go for Vuex store state management, So here we are going to create single store to maintain state i.e single source of truth.

🗃️ Vuex Store

Vuex store is global state from where each components can access data no need to consider up and down node of tree.

If any component updates the state then others components will get updated state immediately.

what happens suppose many components tries to change state ?

So here state management patterns brings Mutation and Actions terms.

⚙️ Mutations: Its name suggest us that it is responsible for to mutate the current state of object.

📋 Actions: Action shouldn't change state directly but call the mutations. It can invoke multiple mutations.

⛏️ Getters: It works as computed property for stores.

Lets take example to understand in more clarity —

In our stare property we have students of array.

Below that setStudents mutations allows us to update student array that we’ll receive from an API call in our Action below.

Then in our actions we are having multiple steps:

first we make api call then we commit setStudents mutation with current api response.

And we will get updated api response using gettters.

Hope single source of truth useful for you 😄
Do let me know if you want some other articles of this type here 📪

Helps me to stay awake to write 💛

--

--

--

Love Programming and Writing, Software Engineer, Pune

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Code Level Implementation of Google analytics in E-commerce site.

A Full Featured NextJS eCommerce CMS + 15 NextJS Templates in 2022 — UI-Lib’s Blog

What can go wrong with If/Else in JavaScript?

React — Render Props

ReactJS Form Editable

Develop and Deploy React Web App on Docker container

Reactive programming

How to Find and Use Components from bit.dev to Build Your App

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Prasad Sonawane

Prasad Sonawane

Love Programming and Writing, Software Engineer, Pune

More from Medium

Vue.js: replace <a> with <router-link> in dynamic HTML

Create a Basic useFetch Hook in Vue.js

vue custom useFetch hook

Step-by-step: How to Create a Vue Multi-Language App with Vue-i18n

Why We Use Composition API in Vue.JS