Vue多页项目抽取公共方法到共享JS文件调用报TypeError如何解决

报错的核心原因是：将方法抽离到独立的.js公共文件后，函数内部的this不再指向Vue组件实例。ES模块默认运行在严格模式下，未绑定执行上下文的函数内部this值为undefined，此时调用this.printMessage就会抛出TypeError: Cannot read properties of undefined错误。

方案1：无依赖抽离（最适合新手，无this绑定问题） #

抽离公共方法时不要依赖this，所有需要用到的方法、参数全部通过入参传递，从根源避免上下文指向问题。

1. 新建公共方法文件，比如src/utils/common.js：

// 所有公共方法不使用this，依赖全靠传入
export const printMessage = (string, id) => {
  console.log(string, id)
}

export const downloadModel = (id, printHandler) => {
  printHandler('Download', id)
}

2. 在需要使用的Vue组件中引入调用即可：

import { downloadModel, printMessage } from '@/utils/common.js'
export default {
  methods: {
    handleDownload(id) {
      // 传入需要的参数和依赖方法
      downloadModel(id, printMessage)
    }
  }
}

方案2：使用Mixin混入（选项式API推荐） #

如果要整组复用和组件写法完全一致的methods（即方法里需要通过this访问组件实例的其他属性、方法），可以使用Vue内置的mixin能力实现逻辑复用。

1. 新建mixin文件，比如src/mixins/commonMethods.js：

// 写法和组件内的methods完全一致，不需要额外改this逻辑
export default {
  methods: {
    downloadModel(id) {
      this.printMessage('Download', id)
    },
    printMessage(string, id) {
      console.log(string, id)
    }
  }
}

2. 在需要复用的组件中引入混入即可，混入后所有方法会自动挂载到组件实例上，和你直接写在组件methods里的用法完全一致：

import commonMethods from '@/mixins/commonMethods.js'
export default {
  mixins: [commonMethods],
  // 组件其余自身逻辑
}

不要在普通独立JS文件的导出函数里直接使用this试图访问Vue组件实例，普通模块的函数执行上下文和Vue组件没有默认绑定关系，必然会出现指向错误。

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