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



  • I’ve initialized a new project using the quasar cli and choose to have Vuex, Axios and Typescript.

    Everything seems fine, until I’ve tried to declare an action which uses Axios in the Vuex store, I get the error TS2339: Property '$axios' does not exist on type 'Store '. The boot axios.ts configuration is properly set as per documentation (actually never touched it as it has been built by the quasar cli).

    This is the store folder tree created using quasar new store -f ts commesseStore:
    a08aa064-9327-4a6e-8ace-7d4e53adf26f-image.png

    And here is the action.ts file:

    import { ActionTree } from 'vuex';
    import { StateInterface } from '../index';
    import { CommesseStateInterface } from './state';
    
    const actions: ActionTree<CommesseStateInterface, StateInterface> = {
      init ( context ) {
      // Error is thrown here
        this.$axios
          .get(`clienti`)
          .then((response: { data: any; }) => {
            context.commit('get_clienti', response.data)
            console.debug('get_clienti', response)
          })
          .catch((err: any) => console.error('init', err))
      // Error is thrown also here
        this.$axios
          .get(`commesse`)
          .then((response: { data: any; }) => {
            context.commit('get_commesse', response.data)
            console.debug('get_commesse', response)
          })
          .catch((err: any) => console.error('init', err))
    
      }
    };
    
    export default actions;
    
    

    quasar info

    Operating System - Windows_NT(10.0.18363) - win32/x64
    NodeJs - 14.15.0
    
    Global packages
      NPM - 6.14.8
      yarn - 1.22.10
      @quasar/cli - 1.1.2
      @quasar/icongenie - 2.3.3
      cordova - Not installed
    
    Important local packages
      quasar - 1.14.3 -- Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time
      @quasar/app - 2.1.6 -- Quasar Framework local CLI
      @quasar/extras - 1.9.10 -- Quasar Framework fonts, icons and animations
      eslint-plugin-quasar - Not installed
      vue - 2.6.12 -- Reactive, component-oriented view layer for modern web interfaces.
      vue-router - 3.2.0 -- Official router for Vue.js 2
      vuex - 3.5.1 -- state management for Vue.js
      electron - Not installed
      electron-packager - Not installed
      electron-builder - Not installed
      @babel/core - 7.12.3 -- Babel compiler core.
      webpack - 4.44.2 -- Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, whi
    ch can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff
    .
      webpack-dev-server - 3.11.0 -- Serves a webpack app. Updates the browser on changes.
      workbox-webpack-plugin - Not installed
      register-service-worker - 1.7.1 -- Script for registering service worker, with hooks
      typescript - 3.9.5 -- TypeScript is a language for application scale JavaScript development
      @capacitor/core - Not installed
      @capacitor/cli - Not installed
      @capacitor/android - Not installed
      @capacitor/ios - Not installed
    
    Quasar App Extensions
      *None installed*
    

    Given the fairly empty project I am also attaching the full app bundle for inspection https://ufile.io/fhpy93bq, the node_modules folder has been omitted for obvious reasons so it would be needed to npm install.

    I’ve already stumbled upon another post on the same issue here: https://forum.quasar-framework.org/topic/4135/this-axios-in-action however it is fairly old.



  • 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



  • @dobbel Thanks for the update!

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



  • @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.







  • 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
    }```


  • @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).



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



  • @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



  • @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.


Log in to reply