javascript - 如何在导入的 JS 库中访问 VueJS Mixin

Question

我有一个“commonLibrary.js”，已将其导入到我的 Vue 应用程序中。

这个库的一小段(也是一个很好的例子)是:

var defaultDecimalRounding=3

function formatNumber(number) {
    if (isNaN(number.value) == true) { return '-' }
    return numberWithCommas(parseFloat(number.value, 2).toFixed(defaultDecimalRounding));
}

因此，当调用“formatNumber”时，它会根据变量“defaultDecimalRounding”返回一个小数舍入的数字

我想要做的是将这个 defaultDecimalRounding 变量从 commonLibrary.js 移出并移到我的 Vue 应用程序中，以便可以在应用程序内更改它。

我创建了一个Mixin，如下:

Vue.mixin({
    data: function () {
        return {
            get defaultDecimalRounding() { return 3 },
        }
    },
});

但我似乎无法让我的 formatNumber 函数读取这个 defaultDecimalRounding Mixin。

我不介意对 commonLibrary.js 进行代码重写，其中只有十几个函数，但如果知道如何让 VueJS 和导入的 JS 库相互通信，那就太好了 future 的项目。

编辑commonLibrary.js 导入为:

import common from './scripts/common.js';
const commonLibrary = {
    install() {
        Vue.common = common
        Vue.prototype.$common = common
    }
}
Vue.use(commonLibrary)

Answer 1

执行以下操作:

在common.js

var defaultDecimalRounding = 3;

// use another name for export cause previous name  already is declared
export const defaultDecimal = defaultDecimalRounding;

function formatNumber(number) {
    if (isNaN(number.value) == true) { return '-' }
    return numberWithCommas(parseFloat(number.value, 2).toFixed(defaultDecimalRounding));
}

在你的 vue 应用程序中:

import { defaultDecimal } from "./common";

Vue.mixin({
  data: function() {
    return {
      defaultDecimal : defaultDecimal
    };
  }
});