如何在组件内部导出和导入多个功能？ Vuejs

Question

在我的 Date.js 中，我试图导出多个函数，但是它失败并返回了很多错误。

import moment from 'moment';

let today = moment();

const age = function(date) { return today.diff(moment(date), 'years'); }
const ageGreaterThan = function(date, age) { return age(date) > age; }
//more functions here

export default age, ageGreaterThan;

在我的 Signup.vue 中，我试图导入上面的文件，因为它预期会失败。

import Datex from './../util/Date.js';

export default{
    data(){ datex: new Datex },

    methods: {
        sample(val){ return this.datex.age(val); }
    }
}

我真的对此reference感到困惑，有人可以帮我怎么做？

Answer 1

您可以像这样直接导出成本：

选项1-使用直接导出export const func

import moment from 'moment';

let today = moment();

export const age = function(date) { return today.diff(moment(date), 'years'); }
export const ageGreaterThan = function(date, ageVal) { return this.age(date) > ageVal; }
//more functions here

请注意，由于您没有使用defaults对象，因此导入将需要使用* as表单

import * as Datex from '../util/Date.js

选项2-创建函数并包装以导出为默认对象

import moment from 'moment';

let today = moment();

const age = function(date) { return today.diff(moment(date), 'years'); }
const ageGreaterThan = function(date, ageVal) { return this.age(date) > ageVal; }
//more functions here

export default {
   age,
   ageGreaterThan,
   // the other functions
}

选项3-直接在导出对象中定义函数

import moment from 'moment';
let today = moment();

export default {
   age(date) {
      return today.diff(moment(date), 'years')
   },
   ageGreaterThan(date, ageVal) {
      return this.age(date) > ageVal;
   },
   // the other functions
}

---

组件中的问题是您将其视为类而不是对象。您应该删除new Datex()并直接使用Datex.*()（其中*是函数）

如果从上方使用选项2或3，则可以这种方式导入。 （对于选项1，请参见上文使用* as。） 然后，在您的组件中...

import Datex from '../util/Date.js';

export default{

    methods: {
        sample(val){ return Datex.age(val); }
    }
}

或者您可以仅直接导入所需的功能

import { age, ageGreaterThan } from "../util/Date.js";

export default{

    methods: {
        sample(val){ return age(val); }
    }
}

Answer 2

一个简单的例子：

// use/loading.js

import { Loading } from "quasar";
import { i18n } from "../../app/src/boot/i18n";

export default {
  show: (message = null) => {
    Loading.show({
      message: `${i18n.t(message || "request_processing")} ...`
    });
  },

  hide: () => Loading.hide()
};

要在组件中使用

import loading from "use/loading";

export default {
  ...
  methods: {
    async myFunction() {
      loading.show();

      try {
        await fetchAPI()
      } catch (e) {
        // HANDLE ERROR
      }
      loading.hide();
    }
  },
  ...
};
</script>