vue3中如何实现全局通用的js工具类其他组件使用的时候无需导包

具体实现

第一种使用全局Properties

在Vue 3中，可以通过在全局app.config.globalProperties对象上添加方法或属性来创建一个通用的工具类。这样在应用的任何地方都可以直接使用。

以下是一个简单的示例：

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$myUtil = {
  //定义一个通用的方法
  getDate: function() {
    return new Date().toLocaleDateString()
  },
  //定义一个通用的属性
  version: '1.0.0'
}

app.mount('#app')

现在，我们已经在全局范围内定义了一个名为 $myUtil 的工具类，其中包含一个 getDate 方法和一个 version 属性。这使得我们可以在Vue组件中直接调用这些方法而无需导入它们。例如：

<template>
  <div>
    <p>Today's date is: {{ $myUtil.getDate() }}</p>
    <p>This app uses version {{ $myUtil.version }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$myUtil.getDate())
  }
}
</script>

需要注意的是，这种做法虽然方便，但容易导致代码的可读性变差。如果要写大量的工具函数，最好还是将它们放在单独的模块中，然后在需要的地方导入使用。

第二种使用全局mixin

在Vue3中可以使用全局混入（global mixin来编写通用的工具类，从而实现在不需要导包的情况下在所有组件中使用。

具体步骤如下：

1.创建一个单独的js文件，例如utils.js，编写你需要的工具函数，并将它们作为一个对象返回。例如：

// utils.js
export default {
  formatDate(date) {
    // 格式化日期，返回字符串
  },
  debounce(func, delay) {
    // 防抖函数，返回函数
  },
  // 其他工具函数...
}

在main.js文件中引入该文件，并将其作为一个全局混入。例如：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import utils from './utils.js'

const app = createApp(App)

app.mixin({
  methods: {
    ...utils,
  }
})

app.mount('#app')

以上代码中，我们通过调用createApp()函数创建了一个应用程序实例，然后通过app.mixin()方法将utils.js文件导出的所有工具函数添加到Vue实例的原型链上，使得在所有组件中都可以直接调用这些工具函数。

在组件中使用工具函数

现在，我们可以在任何组件中使用formatDate()、debounce()和其他在utils.js文件中定义的工具函数，例如：

<template>
  <div>
    <p>{{ formatDate(new Date()) }}</p>
    <input type="text" @input="debounce(handleInput, 500)">
  </div>
</template>

<script>
export default {
  methods: {
    handleInput() {
      // ...
    }
  }
}
</script>

在上面的代码中，我们直接调用了formatDate()和debounce()函数，并且不需要在组件中导入这些工具函数，因为它们已经被添加到Vue实例的原型链上了。

注意：全局混入虽然方便，但也有潜在的问题。因此，在使用该方法时应当谨慎，确保不会影响到其他组件的正常运行。

本文内容来自 : ChatGPT

乱码三千 – 点滴积累 ,欢迎来到乱码三千技术博客站

具体实现

第一种 使用全局Properties

第二种 使用全局mixin

第一种使用全局Properties

第二种使用全局mixin