JavaScript vue 組件中的導出功能失敗

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.$router不會像這樣訪問。 你需要導入你的 Vue 路由器實例來調用它。