[Vuejs]-How to display to the user axois post request in Vue

0๐Ÿ‘

โœ…

I limit myself only to solving the problem based on the interpretation of the code provided

Error:

state.registerError = error.response //this is did not work // you cannot change state directly, for this you can/has to use MUTATIONS. Changed:

commit("setErrorHttp", error) // Error captured from axios

async SignUp({ commit }, { username, password }) {
    const response = await axios.post('...', {
        username: username,
        password: password
    })
        .catch(error => {
            console.log(error)
            commit("setErrorHttp", error) // Error captured from axios
        })
    commit('setUser', response.data)
}

Then require declare it the in mutations

setErrorHttp // The handler function is where we perform actual state modifications. You can consulting doc
https://vuex.vuejs.org/guide/mutations.html. The solution:

setErrorHttp: (state, payload) => {
    state.registerError = payload // TODO: feel free to customize your response to the user, contained in payload.
}

Finally here conclusion with state

So registerError could be used from any component (e.g ShowErrorHttp.vue); Through mapGetters, mapState or if you prefer with $store.state.registerError.

state: {
  registerError : null // or make Object customized relationships with Component
}

I hope it will be useful

0๐Ÿ‘

the error message "The password is too similar to the username." should be in the body of the response you received so you can access it with

catch (err => console.log(err.response.data);

Leave a comment