Nuxt3/Vue3/Vite插件文件中能否定义多个Helper？

完全可以在同一个Nuxt 3插件文件中提供多个全局可用的Helper，不用局限于单个provide项。你只需要在defineNuxtPlugin返回的provide对象中添加多个键值对，每个键会自动以$作为前缀，成为全局可访问的Helper。

示例代码 #

// plugins/global-helpers.ts
export default defineNuxtPlugin(() => {
  return {
    provide: {
      // 格式化日期的Helper
      formatDate: (date) => {
        return new Intl.DateTimeFormat('zh-CN').format(date)
      },
      // 计算含中文字符的字符串长度
      getStringLength: (str) => {
        return [...str].length
      },
      // 数组批量处理工具
      batchProcess: (arr, handler) => {
        return arr.map(handler).filter(Boolean)
      }
    }
  }
})

在组件中使用 #

你可以直接在模板或脚本中访问这些Helper：

<template>
  <div>
    <p>格式化日期：{{ $formatDate(new Date()) }}</p>
    <p>字符串长度：{{ $getStringLength('Nuxt 3 真好用') }}</p>
  </div>
</template>

<script setup>
// 在脚本中通过useNuxtApp获取
const { $batchProcess } = useNuxtApp()
const processedList = $batchProcess([1, 2, 3, 4], num => num * 2)
console.log(processedList)
</script>

注意点 #

• provide对象中的键名会自动加上$前缀，所以定义formatDate后，全局访问时用$formatDate
• 除了函数，你也可以在provide中提供对象、类实例等任意类型的Helper，适配不同业务场景

内容的提问来源于stack exchange，提问作者CBD