vue3使用use挂载方法

在Vue 3项目中，我们经常会遇到需要将一些通用的方法或逻辑抽离出来进行复用的情况。为了解决这个问题，可以利用setup函数中的组合式API特性，通过创建自定义的useXxx函数来挂载方法。

解决方案

解决方案是创建一个useFunction.js文件（或者其他合适的名字），在这个文件里定义好想要挂载的方法，然后在组件的setup函数中引入并调用这个函数，从而达到复用代码的目的。这种方式不仅提高了代码的可读性，还增强了组件之间的解耦性。

具体实现方式一：简单封装

在项目的src/composables/目录下新建一个名为useFetchData.js的文件（假设我们要封装一个获取数据的方法）：

javascript
import { ref } from 'vue'
export function useFetchData(url) {
    const data = ref(null)
    const loading = ref(true)
    const error = ref(null)</p>

<pre><code>fetch(url)
    .then(response => response.json())
    .then(jsonData => {
        data.value = jsonData
    })
    .catch(err => {
        error.value = err
    })
    .finally(() => {
        loading.value = false
    })

return { data, loading, error }

}

然后在组件中使用：

javascript

  <div>Loading...</div>
  <ul>
    <li>{{ item.name }}</li>
  </ul>
  <p>Error: {{ error.message }}</p>
</p>


import { useFetchData } from '../composables/useFetchData'

const url = 'https://api.example.com/data'
const { data, loading, error } = useFetchData(url)


<p>

具体实现方式二：参数化配置

如果希望让这个方法更加灵活，可以根据传入的不同配置项执行不同的逻辑。例如，我们可以对上面的例子进行改进，允许用户传递额外的请求选项：

javascript
// src/composables/useFetchData.js
import { ref } from 'vue'</p>

<p>export function useFetchData(url, options = {}) {
    const data = ref(null)
    const loading = ref(true)
    const error = ref(null)</p>

<pre><code>fetch(url, options)
    .then(response => response.json())
    .then(jsonData => {
        data.value = jsonData
    })
    .catch(err => {
        error.value = err
    })
    .finally(() => {
        loading.value = false
    })

return { data, loading, error }

}

当我们在组件中调用时就可以根据需求添加额外的参数了：

javascript</p>


import { useFetchData } from '../composables/useFetchData'

const url = 'https://api.example.com/data'
const options = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
}

const { data, loading, error } = useFetchData(url, options)


<p>

通过以上两种方式，我们可以在Vue 3项目中有效地使用use来挂载方法，这有助于提高代码的质量和开发效率。实际项目中可能还会遇到更复杂的需求，但是掌握了这种方法后，相信你可以举一反三地解决更多问题。