vuejs2 - Access Axios plugin inside Vuex named module

Question

I have axios installed as Vue plugin and want to access it from within a named Vuex store. The axios plugin is defined within src/plugin/axios.js as:

import Vue from 'vue'
import axios from 'axios'

export default {
  install() {
    Vue.prototype.$http = axios
  }
}

Then in main.js I have:

import Vue from 'vue'
import App from './App.vue'
import Axios from './plugins/axios'
import router from './router'
import { Auth0Plugin } from './auth'
import { domain, clientId, audience } from '../auth_config.json'

import store from './store/store'

Vue.config.productionTip = false

Vue.use(Auth0Plugin, {
  domain,
  clientId,
  audience,
  onRedirectCallback: (appState) => {
    router.push(
      appState && appState.targetUrl
        ? appState.targetUrl
        : window.location.pathname
    )
  }
})

Vue.use(Axios)
new Vue({
  router,
  store,
  render: (h) => h(App)
}).$mount('#app')

And the named store is within store/modules/fixedstations.js and contains:

export const namespaced = true
export const state = {
  authorized: '',
  listStations: [],
  dataApi: [],
  stationsStatus: [],
  count: 0
}

const endpointStationsStatus =
  'https://url/rest/api/v1/fixed/status/'

export const actions = {
   // I WANT TO AVOID TO PASS {http}} ----------------
   getStationsStatus: async ({ commit },{ http }) => {
    const { data } = await http.get(endpointStationsStatus)
    commit('GET_STATIONS_STATUS', data)
  }
}
export const mutations = {
  CHECK_AUTH(state, payload) {
    state.authorized = payload
  },
  GET_STATIONS_STATUS(state, payload) {
    state.stationsStatus.push(payload)
  }
}

I want to access Axios http in my actions without having to explicitly pass it when dispatching the action. Currently, in my vue componet, I have to invoke methods as:

 methods: {
    async getData() {
      // await this.$store.dispatch('fixedstations/increment')
      await this.$store.dispatch('fixedstations/getStationsStatus', {
        http: this.$http // WANT TO AVOID TO PASS THIS
      })
    }

I tried using Vue.axios.get (as suggested in post) but this throw error "Vue undefined" ( I added import Vue from 'vue' at the beginning of store/modules/fixedstations). Essentially I want to avoid to pass {http:this.$http} whenever I dispatch an action while at the same time avoiding to instantiate multiple instances of axios.

Answer 1

等待大神解答