Quick guide to Vuex

Vuex is a package developed to manage the state of data in Vue app. In other words, Vuex manages all the data we ever needed inside our app.

Prerequisites

• Basic understanding of Vue
• Basic understanding of REST API

What is Vuex?

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Why should you use it?

• Best practices
• Single data centralization
• DRY (Don't repeat yourself)
• Easier to maintain and modify existing code

How?

This simple illustration would make you have a thought on Vuex.

Let's say you have an app that calls endpoints for CRUD (Create, Read, Update, Delete) Operations,Remember the conventional method is using the endpoint directly into your app with axios or fetch then you get a response and move on,

But what if we need to call the same endpoint on another page, that's where Vuex comes in, the conventional method would literally make the request twice but with Vuex; The data would be stored from the first instance in a state which can be later used several times on other views or components.

Vuex Common Terminology

Vuex contains a few terms which can be confusing; they include:

• Getters
• Mutation
• Action
• State
• MapState

State: This is a JavaScript object containing a list of variables that are used to handle responses from mutation

state: {
  users: [],
  blogs: [],
}

Getters: This is used to filter data in a particular state

findBlogById: (state, getters) => (id) => {
  return state.blogs.find(blog => blog.id == id);
}

Action: This is used to make a request using axios or fetch, just like the conventional method.

axios.get('/api/blog')
.then(res => {
   commit("LOAD_BLOGS", res.data)
})

MapState: this is used in Vue computed property such that the state needed can be accessible in template/view.

computed: {
  ...mapState(['blogs']),
}

//OR 

computed: mapState(['blogs']),

<div v-if="blogs">
   <div v-for="(value, index) of blogs">
      <h1> {{value.title}} </h1>
      <p> {{value.body}} </p>
   </div>
</div>

Mutation: These are very similar to events, they allow a state to be modified by the response of the action.

//fetching blogs

LOAD_BLOGS(state, blogFromAction) {
   state.blogs = blogFromAction
}

//adding new blog

ADD_BLOG(state, payloadFromForm) {
    state.blogs.unshift(payloadFromForm);
}

But I still don't understand

In case you still don't understand, Here is a link to a simple blog that uses https://jsonplaceholder.typicode.com as endpoints.

Thanks ❤️