Laravel-Mix编译Vuex时this被转译为undefined问题求助

这问题我之前帮朋友排查过类似的，大概率是箭头函数和普通函数的上下文差异或者Laravel Mix的Babel配置优化过度导致的，咱们一步步来解决：

1. 先检查Vuex Action的函数定义方式 #

这是最常见的原因！如果你用箭头函数定义Action，this会绑定到外层的全局上下文，而不是Vuex的Store实例，自然找不到_vm属性，编译时就会被优化成undefined。

错误示例（别这么写）： #

const actions = {
  fetchUserData: () => {
    this._vm.$errorToast('获取数据失败') // 这里的this根本不是Store实例！
  }
}

正确示例（改用普通函数）： #

const actions = {
  fetchUserData() { // 用普通函数定义Action
    this._vm.$errorToast('获取数据失败') // 此时this指向Store实例，能正确拿到_vm
  }
}

你提到另一个Store能正常转译为_this8，大概率是因为那个Store的Action用了普通函数，所以编译时保留了正确的上下文引用。

2. 调整Laravel Mix的Babel配置，避免过度优化 #

有时候Babel的箭头函数转换插件会把this的上下文处理乱，尤其是当你不小心混用箭头函数时。可以在项目根目录修改webpack.mix.js，添加Babel配置：

mix.js('resources/js/app.js', 'public/js')
  .babelConfig({
    plugins: [
      ['@babel/plugin-transform-arrow-functions', { spec: true }]
    ]
  });

spec: true参数会让箭头函数的this处理更符合ECMAScript规范，避免不必要的上下文替换。

3. 更稳妥的替代方案：不依赖_vm内部属性 #

_vm其实是Vuex的内部私有属性，未来版本可能会有变动，不如直接把Toast插件挂载到Vue原型上，全局调用更稳定：

第一步：在app.js中挂载插件到Vue原型 #

import Vue from 'vue';
import errorToast from './plugins/errorToast';

// 方式1：通过Vue.use注册
Vue.use(errorToast);
// 方式2：直接挂载到原型
Vue.prototype.$errorToast = errorToast;

第二步：在Vuex Action中直接调用 #

import Vue from 'vue';

const actions = {
  fetchUserData({ commit }) {
    try {
      // 你的业务请求逻辑
    } catch (err) {
      Vue.prototype.$errorToast('获取数据失败'); // 直接全局调用，无需依赖this._vm
    }
  }
}

4. 清理缓存重新编译 #

Laravel Mix偶尔会有缓存残留，导致编译结果异常。执行以下命令清理后重新编译：

npm run clean
npm run dev

或者直接删除public/js目录下的编译文件，再重新执行编译命令。

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