Unable to use this.$axios in Vuex: TS2339: Property '$axios' does not exist on type 'Store '.

[dobbel]

Last post claims a solution:
https://forum.quasar-framework.org/topic/4534/how-to-access-axios-inside-store-action/6

btw it’s recommended to use nodejs 12.x instead of 14 with Quasar

[Maxiride]

@dobbel Thanks for the update!

I didn’t knew Node 12 was recommended, did I miss the note somewhere in the documentation?

[dobbel]

@Maxiride

No I don’t think it’s in the docs, but that’s what I have been told on these forums more then once by staff members.

Until a Quasar staff member or changelog will say otherwise I will repeat this advice when I see someone using node > 12.

[dobbel]

@Maxiride

The chief still says it 2 days ago:
https://github.com/quasarframework/quasar/issues/8025

[Hawkeye64]

https://github.com/quasarframework/quasar/pull/8028

[ytsejam]

while booting axios , you have to include in store also.

import axios from 'axios'

export default ({ store, Vue }) => {
  Vue.prototype.$axios = axios
  store.$axios = axios
}```

[Hawkeye64]

@ytsejam store also has a reference to the vm. I can’t remember at this time if it’s called app or _vm (store is one, router uses the other).

[ytsejam]

@Hawkeye64 I think it is used as “this._vm.axios”, but did not work for me I have found this boot solution.

[codethirsty]

@ytsejam said in Unable to use this.$axios in Vuex: TS2339: Property '$axios' does not exist on type 'Store '.:

@Hawkeye64 I think it is used as “this._vm.axios”, but did not work for me I have found this boot solution.

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

axiosContext.interceptors.response.use(
    response => {
      if (response.data.code === 400) {
        localStorage.removeItem('token');
        window.location = "/login";
        return;
      }
      return response;
    },
    error => {
      if (error.response && error.response.status === 401) {
        localStorage.removeItem('token');
        window.location = "/login";
        return;
      }
      return Promise.reject(error);
    }
  );
Vue.prototype.$axios = axiosContext;
Vuex.Store.prototype.$axios = axiosContext;

I boot them this way

[Hawkeye64]

@ytsejam

I think it is used as “this._vm.axios”, but did not work for me I have found this boot solution.

For one thing, you would need to access it as: this._vm.$axios because you put a $ in front on the prototype definition
Second, I don’t know how you are writing your functions but the this will be inforrect if you used fat arrow (=>) – they need to be functions for this to be referencing the store.