Vue.js使用Axios发POST请求时this.$store is undefined报错如何解决

你遇到的TypeError: this.$store is undefined错误是由Vuex初始化流程错误、依赖导入异常两个核心问题导致的，按以下步骤修复即可：

1. 修复store/module-example/index.js文件 #

原有代码存在3处错误：

• Vue.use(Vuex)执行顺序错误，必须在创建Vuex.Store实例前注册Vuex插件
• 导入了不存在的./store文件，且额外创建了无用的Vue实例
• 该文件为Quasar框架的store入口文件，不需要手动创建Vue实例，导出的Store实例会由框架自动挂载到根Vue实例

修复后代码：

import Vue from 'vue'
import Vuex from 'vuex'
// 导入自定义的store模块
import auth from './store-enregistrement'

// 先注册Vuex插件
Vue.use(Vuex)

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      auth
    },
    // 开发环境开启严格模式
    strict: process.env.DEV
  })
  return Store
}

2. 修复store-enregistrement.js文件 #

原有代码未导入axios实例api，后续执行POST请求会抛出未定义错误，修复后代码：

// 导入boot/axios中导出的api实例
import { api } from '../boot/axios'

const state = {

}

const mutations = {

}

const actions = {
  enregistrerConfig ({ commit }, payload) {
    api.post('/rpi/110', payload)
      .then(function (response) {
        console.log('CREATION OK', response)
      })
      .catch(function (error) {
        console.log(error.response)
      })
  }
}

const getters = {

}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

3. 确认Quasar配置项 #

检查quasar.conf.js配置，确保axios引导文件已注册、Vuex功能已启用：

// quasar.conf.js 核心配置片段
module.exports = function (/* ctx */) {
  return {
    // ...其他配置
    boot: [
      'axios',
    ],
    // ...其他配置
  }
}

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