在不同的 Vue 模板中重用 JavaScript 函数

Question

我在静态 HTML 页面中使用 Vue3 选项 API（实际上是动态生成的 .NET MVC，但这与我的问题无关）。我最初是在 Vue2x 上使用的，但是更新到 Vue3 后，我原来的方法似乎不再起作用了。

我有一些简单的 JavaScript 代码，可以用来以几种不同的方式格式化一个人的出生日期。我希望能够在多个不同的页面/应用程序中重用此代码。这是我的“DataFormatting.js”文件的几行：

// DataFormatting.js

function formatDob(dob) {
    if (dob) {
        dob = new Date(dob);
        if (isValidDate(dob)) {
            var options = { month: 'short', day: 'numeric', year: 'numeric' };
            return dob.toLocaleDateString("default", options);
        }
    }
    return "";
}

function formatDobWithAge(dob) {
    if (dob) {
        dob = new Date(dob);
        if (isValidDate(dob)) {
            var age = getAge(dob, new Date());
            var options = { month: 'short', day: 'numeric', year: 'numeric', timeZone: 'UTC' };
            return dob.toLocaleDateString("default", options) + " (" + age + " yo)";
        }
    }
    return "";
}

// other formatting functions omitted

function isValidDate(d) {
    return d instanceof Date && !isNaN(d);
}

现在我希望能够在多个不同的页面（或 Vue 应用程序实例）中重用此文件/库。

我过去只能简单地使用

<script>

标签包含此文件，如下所示：

<script src="~/js/DataFormatting.js"></script>

然后，从模板中，我可以像这样引用我的 JavaScript 库函数：

<tr v-for="person in people">
    <td>{{ formatDobWithAge(person.DateOfBirth) }}</td>
</tr>

使用 Vue3，这就是我的设置：

<script src="~/lib/vue/dist/vue.global.js"></script>
<script>
    const { createApp } = Vue

    createApp({
        data() {
            return {
                people: @Html.Raw(JsonSerializer.Serialize(Model.People))
            }
        },
        mounted() {
        },
        computed: {
        },
        watch: {
        },
        methods: {
        }
    }).mount('#app');
</script>

为什么我不能再引用这个额外的 JavaScript 库了？ 我需要做什么才能可以引用一组 JS 函数来进行格式化？ 我是否需要摆脱纯 JS 文件并将其移动到对 Vue（组件？）更友好的文件？

Answer 1

您可以轻松地将

DataFormatting.js

转换为模块，当您在文件中制作可导出的内容时，它就符合模块的资格。

确保您的文件位于

src

目录的范围内，并在特定 .vue 文件或需要利用这些函数的其他 JS 文件中的任意位置导入您的函数。

// DateFormatting.js

export function formatDob(dob) { ... }

export function formatDobWithAge(dob) { ... }

function isValidDate(d) { ... }

// example.vue
<script>
  import { formatDob, formatDobWithAge } from 'DateFormatting.js'

  ... {

    data() { ... }
    methods: { formatDob, formatDobWithAge }

 ...

</script>

附注为了扩展对 ES 模块的理解，您可以对 lodash 的 ES 模块版本或任何 ES 支持库进行相同的操作，通过仅注册您在

 中使用的内容，可以在模板中以最少的努力利用 

lodash-es

 库methods

。

https://www.npmjs.com/package/lodash-es