Understanding update operation in state management(Vue Js).

We all are familiar with basic operations we usually perform to make changes in current state of a website or web app. Operations like add, update, and delete. In often used way client needs to make API calls to get data, post, put, or delete. Depending on the type of operation we perform, we need to make relevant API calls.

For example: In order to retrieve data that is stored in the backend(database), we use ‘GET’ API, where we need not send any additional token or data along with it.

Now let’s try to understand how the UPDATE operation is performed alongside State Management in Vuejs

It is a best practice to hand-run our executable code before direct implementation. Although, it might be difficult for others to understand what you have written in your hand-run rough space.

Pre-requisite:

Pre-requisite task required before proceeding for the call-for-action button:

1. Call props for the pre populated fields.

2. Reassign it in new variable. Ex: ‘this.name=this.selectedField.name’

Step-1:

Changed form data which is to be submitted by clicking ‘SUBMIT’ button.

We add ‘@click=editproduct(item)’ function and declare it in methods in script tag. Inside the function, we create two constant variables; let them be ‘data’ and ‘navadata’ having key-value pairs of name, category, etc and product id, xyz: data respectively. We then parse and store the token key in var token and then dispatch store along with ‘navadata’ as a parameter. Setting ‘.then’ for successful API response and ‘.catch’ for unsuccessful API response eventually.

Step-2:(We are using axios to make API calls here.)

Inside store(product.js), controls will be transferred to actions and the update action to be more precise, that we dispatched from page. Here, in the given format we make ‘PUT’ API call.

updateProd(context, alelaNavaData){
        var token = JSON.parse(localStorage.getItem("shToken"));
        return new Promise((resolve, reject) =>{
            // axios
            this.$axios.put(`${process.env.BASE_URL}admin/products/edit?prod_id=${alelaNavaData.prod_id}`,  
            alelaNavaData.formChaPurnaData,
            {
                headers: {
                  Authorization: "Bearer " + token,
                },
            })
            .then(response =>{
                context.commit("EDIT_PRODUCT", response.data);
                resolve(response);
            })
            .catch(err =>{
                reject(err);
            })
        })    
    },

In PUT request, we send three fields viz; API url, body, and headers. Inside ‘.then’, we send response to “EDIT_PRODUCT” and inside ‘.catch’, we send error. From ‘.then’ it goes to EDIT_PRODUCT inside mutation.

Step-3: Writing the Mutation

EDIT_PRODUCT(state, data){
        console.log('ok1',state.allProducts);
        var index =state.allProducts.findIndex(item => item.prod_id == data.data[0].prod_id); 
        Object.assign(state.allProducts[index], data.data[0]);
        console.log(index); 
    },

In mutation, we make changes that are supposed to change state in any way. Here, variable index stores index of the data that we sent along with the url from action, while making API call. We then reassign new data from the body to the existing data on that index and thus, update. If successful, control goes to ‘.then’ function on the page from where we dispatched ‘navadata’, else it goes to ‘.catch’ function.

PS: I have made this blog for better understanding of my own. So if anyone comes across anything which is not very understandable, feel free to comment your doubts.

Thank you.