Vue+Rails项目中Vuex无法调用自定义Axios实例的问题咨询

首先咱们来拆解你遇到的问题：
在Vue组件里能用this.$http.secured，是因为VueAxios把实例挂载到了Vue组件实例的$http属性上；但Vuex Store的上下文（比如actions里的this或context）并不是Vue组件实例，所以直接拿this.$http会报错。另外，你之前把Axios实例直接放到Vuex Store的配置参数里是不对的——Vuex Store构造函数只认特定选项（比如state、mutations、actions等），自定义属性不会被正确挂载到store实例上，自然调用不到。

下面给你几种靠谱的实现方式，按推荐程度排序：

方法1：直接在Vuex模块中导入Axios实例（最推荐） #

这种方式最简单直接，不需要额外配置，代码清晰且易于维护。

在你的Vuex Store文件（比如store/index.js或某个模块文件）里，直接导入配置好的Axios实例，然后在actions里使用即可：

// store/index.js
import Vuex from 'vuex'
import { securedAxiosInstance, plainAxiosInstance } from '../axios'

export default new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    SET_ITEMS(state, items) {
      state.items = items
    }
  },
  actions: {
    async fetchItems({ commit }) {
      try {
        // 直接使用导入的secured实例
        const response = await securedAxiosInstance.get('/items')
        commit('SET_ITEMS', response.data)
      } catch (error) {
        console.error('获取列表失败:', error)
        // 可根据需求添加错误提示逻辑
      }
    },
    async refreshToken() {
      try {
        // 使用plain实例调用刷新接口
        const response = await plainAxiosInstance.post('/refresh', {}, {
          headers: { 'X-CSRF-TOKEN': localStorage.csrf }
        })
        localStorage.csrf = response.data.csrf
        localStorage.signedIn = true
      } catch (error) {
        delete localStorage.csrf
        delete localStorage.signedIn
        location.replace('/')
      }
    }
  }
})

方法2：将Axios实例挂载到Store实例上 #

如果你希望在Store的各个地方都能通过this访问到Axios实例，可以在创建Store后把实例挂载到store对象上：

// main.js
import Vue from 'vue'
import Vuex from 'vuex'
import { securedAxiosInstance, plainAxiosInstance } from './axios'
import App from './App.vue'
import router from './router'

Vue.use(Vuex)

const store = new Vuex.Store({
  // 你的state、mutations、actions等配置
})

// 把Axios实例挂载到store实例上
store.$securedAxios = securedAxiosInstance
store.$plainAxios = plainAxiosInstance

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

然后在Vuex的actions里，就可以通过this访问这些实例了：

actions: {
  async fetchItems({ commit }) {
    const response = await this.$securedAxios.get('/items')
    commit('SET_ITEMS', response.data)
  }
}

方法3：通过Vue原型全局挂载（不推荐，仅兼容旧代码） #

如果你习惯了组件里this.$xxx的写法，也可以把实例挂载到Vue原型上，但在Vuex里需要通过store的_vm属性间接访问（依赖Vue内部关联的根实例）：

// main.js
import Vue from 'vue'
import { securedAxiosInstance, plainAxiosInstance } from './axios'

// 挂载到Vue原型
Vue.prototype.$securedAxios = securedAxiosInstance
Vue.prototype.$plainAxios = plainAxiosInstance

然后在Vuex的actions里：

actions: {
  async fetchItems({ commit }) {
    // 通过store的_vm属性访问Vue原型上的实例
    const response = await this._vm.$securedAxios.get('/items')
    commit('SET_ITEMS', response.data)
  }
}

⚠️ 注意：这种方法依赖Vue内部非公开的_vm属性，未来版本可能有变动，不推荐优先使用。

总结 #

优先选择方法1，它代码简洁、依赖明确，不需要额外挂载逻辑，单元测试时也更容易mock Axios实例；方法2适合需要在Store多个地方复用实例的场景；方法3仅作为兼容旧代码的备选方案。

内容的提问来源于stack exchange，提问作者catmal