Nuxt中封装this.$axios为常量导入Vuex调用报undefined如何解决？

你的报错和封装失败的核心原因和Nuxt生命周期无关，是this指向的获取时机和位置完全错误：

1. ES模块顶层作用域的this本身就是undefined，你在url.js中导出AXIOS_POST常量时直接调用this.$axios，此时Nuxt实例还未初始化完成，也根本拿不到挂载了$axios的上下文对象，赋值阶段就已经出错。
2. Nuxt的this.$axios仅在Vue实例方法、Vuex的action/mutation执行上下文、页面生命周期钩子等运行时环境中才能正确获取，不能在静态常量的声明阶段提前预取值。

方案1：修改常量封装逻辑，将axios实例作为参数传入 #

修改url.js代码，把请求封装为接收axios实例的函数：

// url.js
export const POST_API = '/api/v1/'
export const POST_ITEMS_API = '/api/v1/post_items/'

// 封装post请求，调用时传入当前上下文的axios实例
export const AXIOS_POST = (axiosInstance, url, data) => axiosInstance.$post(url, data)

修改Vuex中的action调用逻辑：

export const actions = {
  post ({ commit }, text) {
    // 传入当前action上下文的this.$axios即可
    api.AXIOS_POST(this.$axios, api.POST_ITEMS_API + 'posts', {
      post_items: {
        content: text,
        status: false
      }
    })
    .then((response) => {
      commit('add', response)
    })
  }
}

方案2：用Nuxt插件全局封装请求（更推荐） #

这种方案可以避免每次调用都传入axios实例，适配全场景使用：

1. 在项目plugins目录下新建request.js：

// plugins/request.js
export default ({ $axios }, inject) => {
  // 注入全局$post方法，Vue组件、Vuex、asyncData中都可以直接调用
  inject('post', (url, data) => $axios.$post(url, data))
}

2. 在nuxt.config.js中注册插件：

export default {
  plugins: ['~/plugins/request.js']
}

3. 之后在Vuex的action中直接调用即可：

export const actions = {
  post ({ commit }, text) {
    this.$post(api.POST_ITEMS_API + 'posts', {
      post_items: {
        content: text,
        status: false
      }
    })
    .then((response) => {
      commit('add', response)
    })
  }
}

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