How to move an axios call into its own method using vuex and typescript


I have a method in vuex actions that calls the api and updates the user information. What I am trying to do is move the axios call into its own method and have not had any luck.

Here is my code

async updateProfile({ commit, dispatch }: any, user: User):Promise<User> {
    console.log(user)
    console.log("currentUser")

    const response = await axios.request({
        method: "PUT",
        url: `/users/me/profile`,
        data: user
    });
    //  dispatch('updateUserProfile', user);
   
    console.log(response)
    console.log("response")
    return user;
    // return response;
},
async updateUserProfile(user: any): Promise<User> {
    return await axios.request({
        method: "PUT",
        url: `users/me/profile`,
        data: user
      });
},

The line commented out dispatch is trying to call the axios method and pass the user as a parameter. When I try that line instead of the axios.request I get a 400 error. When I change user: any to user: User I get an Types of property ‘actions’ are incompatible. error

Source: Vue – Stack Overflow

November 29, 2021
Category : News
Tags: async-await | axios | typescript | Vue.js | vuex

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.