0

我有一个“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 库在未来的项目中相互通信，那就太好了。

编辑 commonLibrary.js 被导入为：

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

2 回答 2

1

执行以下操作：

共同的.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
    };
  }
});
于 2020-02-14T13:19:03.987 回答
0

很可能您需要使用this，因为defaultDecimalRounding现在已在 Vue 实例中定义。所以像this.defaultDecimalRounding

于 2020-02-14T09:30:17.190 回答