VUE组件中的JavaScript导出功能失败

Question

我想简化我的代码，因此我将一些函数放在这样的JS文件中：

[...]
function changeToEditView(reportId)
{
    let pathEdit="/edit/"+reportId;
    this.$router.push({ path: pathEdit, replace: true });
}
[...]
export {convertDate, deleteReport, changeToEditView, getPdfByReportId}

当我在vue组件中导入它们时，

import axios from 'axios'
import convertDate from '@/js/methods' 
import deleteReport from '@/js/methods'
import changeToEditView from '@/js/methods'
import getPdfByReportId from '@/js/methods'
export default 
{
[...]
methods:
    {
        convertDate,
        deleteReport,
        changeToEditView,
        getPdfByReportId,

我有此消息：

 warning  in ./src/views/DashboardView.vue?vue&type=script&lang=js

export 'default' (imported as 'deleteReport') was not found in '@/js/methods' (possible exports: changeToEditView, convertDate, deleteReport, getPdfByReportId)

 warning  in ./src/views/DashboardView.vue?vue&type=script&lang=js

export 'default' (imported as 'changeToEditView') was not found in '@/js/methods' (possible exports: changeToEditView, convertDate, deleteReport, getPdfByReportId)

 warning  in ./src/views/DashboardView.vue?vue&type=script&lang=js

export 'default' (imported as 'getPdfByReportId') was not found in '@/js/methods' (possible exports: changeToEditView, convertDate, deleteReport, getPdfByReportId)

我尝试在TE JS文件中导出后将'默认值'列为但是这些功能都没有用

export default {convertDate, deleteReport, changeToEditView, getPdfByReportId}

Answer 1

您在这里有几个问题。

第一个是简单的。例如，将您的脚本更新到命名函数的导出：

export const changeToEditView = (reportId) => {
  let pathEdit="/edit/"+reportId;
  this.$router.push({ path: pathEdit, replace: true });
};

export const deleteReport = () => {
/*  */
};

然后导入：

import { changeToEditView, deleteReport } from '@/src/path-to-file';

然后您可以在VUE组件中使用这些方法。您无需先注册它们，也不需要使用this。。

例如：

methods: {
  doStuff() {
    deleteReport();
    changeToEditView();
  },
},

this 答案 在更详细地解释了命名出口和默认导出之间的差异。

下一个问题是this。$ router无法像这样访问。您将需要导入Vue路由器的实例才能在其上调用.push。