Using axios?

[SomeoneIsWorking]

There is a plugin that registers an axios instance but

• Pages using axios use it with static access import axios from "axios"
• I can't figure out how to reference it inside a Vue component: this.axios and Vue.axios show compile errors

[liborpansky]

Hi, you have to create typings file for axios plugin, for example: ClientApp/src/plugins/axios.d.ts

import { AxiosStatic } from "axios";

declare module "vue/types/vue" {
  interface Vue {
    axios: AxiosStatic;
  }

  interface VueConstructor {
    axios: AxiosStatic;
  }
}

Then Vue components can access registered plugin instance this.axios...

[SomeoneIsWorking]

Thank you. Should the Forecast page get updated then or?

[liborpansky]

I will update it later, in this case I will try to update also plugin registration from js to ts file and create typings declaration for the registration function.

[ddiiorio]

Also interested in how to use the axios plugin properly. I can import it in a Vue component that uses javascript with import axios from '../../plugins/axios' and it will work, but I don't believe that's the proper way to do it.

I also tried creating the axios.d.ts file above and then use axios in a typescript Vue component with this.axios and it will work, but see a warning in VS Code Property 'axios' does not exist on type 'component'.Vetur(2339)

[glebov21]

UP.
We have ClientApp/src/plugins/axios.js already, but how can i use them in my components?
FetchData example use default axios object instead of prepared object in ClientApp/src/plugins/axios.js

window.axios working, but this.$axios is better (not working)

[ddiiorio]

@liborpansky what about using axios within the vuex store? Currently in the code there is the import axios from "axios" import statement in actions.ts, so it wouldn't be using the plugin instance (correct me if I'm wrong)

Using this.$axios produces the error "Property '$axios' does not exist on type 'Store'.ts(2339)"

[liborpansky]

You're right, the plugin instance is not accessible in the vuex store. You can import direct axios instance in store, but in this way you would miss any logic you applied in request / response interceptors...

There's a dirty workaround to pass your Vue instance as an action parameter, so you can access any plugin registered, but it's not an elegant solution I would choose.

Generally I end up with a sort of API Service class responsible for API calls, which uses directly axios non plugin instance that is being imported to all store modules and components directly to encapsulate http calls.

[ddiiorio]

Thanks I will look into that

[glebov21]

I think, what using axios in "store" layer is not better idea for architecture. Maybe i'm wrong :)