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

Class 4 — Prompt 202

Learn To Build Mobile Apps with Ionic Framework & ReactJS Video Series

autogreeter.js

Create full-stack E commerce Application with Nextjs And Strapi (Part 1)

Beyond React Fest 18

The difference between || and ?? operators in Javascript & NodeJS

What Makes AngularJs a Perfect Framework for Responsive Web App Development?

10 Tricks to Optimize Your Angular 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

Implementation axios and Vue.js with separate service?

Fundamental OF Lazy Loading In Vue Js

Accessing Component Data with $ref.

Basic state management Vue