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

[Maxiride]

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:

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.

[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.