vue-axios: Cannot read property 'post' of undefined

Question

I try to send login data using axios and I get this error:

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'post' of undefined"

TypeError: Cannot read property 'post' of undefined

I used this.$http.post from documentation.

main.js

import Vue from "vue";
import App from "./App.vue";
import axios from "axios";
import VueAxios from "vue-axios";
import router from "./router/router";
import store from "./store/index";
import vuetify from "./plugins/vuetify";

Vue.config.productionTip = false;

Vue.use(VueAxios, axios);

new Vue({
    router,
    store,
    vuetify,
    render: h => h(App)
}).$mount("#app");

store/index.js

import Vue from "vue";
import Vuex from "vuex";

import account from "./account.module";

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        account
    }
});

stroe/account/module.js

import jwt_decode from "jwt-decode";
import accountService from "../services/account.service";

const token = localStorage.getItem("token");
const user = token ? jwt_decode(token) : null;
const state = token
    ? { loggedIn: true, user }
    : { loggedIn: false, user };

const getters = {

}

const actions = {
    login({ commit }, user) {
        return accountService.login(user).then(
            data => {
                if (data.status == "success") {
                    const user = jwt_decode(data.token);
                    commit("loginSuccess", user);
                } else {
                    commit("loginFailure");
                }

                return data;
            });
    }
}

const mutations = {
    loginSuccess(state, user) {
        state.loggedIn = true;
        state.user = user;
    },

    loginFailure(state) {
        state.loggedIn = false;
        state.user = null;
    },
}

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

services/account.service.js

const apiUrl = "***";

export default {
    login(user) {
        return this.$http.post(apiUrl + "login", {
            login: user.login,
            password: user.password
        }).then(response => {
            if (response.data.status == "success") {
                localStorage.setItem("token", response.data.token);
            }

            return response.data;
        });
    }
}

tony19 tony19 · Accepted Answer · 2021-04-02T21:10:17

VueAxios only creates a wrapper around the passed in axios, so this.$http.post() is the same as axios.post().

Thus, you could use axios directly in your services file:

import axios from 'axios'; 👈
const apiUrl = "***";

export default {
    login(user) {
                 👇
        return axios.post(apiUrl + "login", {
            login: user.login,
            password: user.password
        }).then(/*...*/);
    }
}

vue-axios: Cannot read property 'post' of undefined

1 Answers