Vue3 axios Cannot read properties of undefined (reading ‘config’)

I’ve been following this guide to making a global loader component but there’s an issue … Read more Vue3 axios Cannot read properties of undefined (reading ‘config’)

I’ve been following this guide to making a global loader component but there’s an issue with setting up the interceptors with the config: TypeError: Cannot read properties of undefined (reading 'config')

I’m using vue 3.2.2, vuex 4.0.2, axios 0.21, and Laravel 8

The loader component is not working and I suspect it might be due to the config error.

app.js

<script>
import { createApp } from 'vue'
import { createStore  } from 'vuex'
import router from './router';
import App from './components/App';
import { loader } from "./loader";

const store = createStore({
    state() {
    },
    modules: {
        loader,
    }
})

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')
</script>

App.vue

<script>
import Sidebar from "../components/Sidebar";
import {mapState} from "vuex/dist/vuex.mjs";
import Loader from "./Loader";
import axios from "axios";
axios.defaults.showLoader = true;

export default {
    components: {
        Sidebar,
        Loader
    },
    computed: {
        ...mapState('loader', ['loading'])
    },
    created() {
        axios.interceptors.request.use(
            config => {
                if (config.showLoader) {
                    store.dispatch('loader/pending');
                }
                return config;
            },
            error => {
                if (error.config.showLoader) {
                    store.dispatch('loader/done');
                }
                return Promise.reject(error);
            }
        );
        axios.interceptors.response.use(
            response => {
                if (response.config.showLoader) {
                    store.dispatch('loader/done');
                }

                return response;
            },
            error => {
                let response = error.response;

                if (response.config.showLoader) {
                    store.dispatch('loader/done');
                }

                return Promise.reject(error);
            }
        )
    }
}
</script>

Source: Vue – Stack Overflow


Categories: NewsTags: , ,

Tags: , ,


Leave a Reply

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