Vue3 Composables：前端开发的逻辑复用利器

前端

2023-12-31 23:25:07

理解Composables

Vue3 引入了 Composition API，让组件逻辑管理更加灵活和强大。在这一基础上，Composables 作为一种最佳实践出现，通过将相关的功能封装到单独的函数中，实现逻辑复用。

Composables 的优势

提高代码组织性：相关功能的集中处理。
增强可维护性：便于修改与扩展。
简化组件逻辑：减少组件内的复杂性。

实战案例——列表查询和增删改查

在前端开发中，页面往往需要处理大量的数据操作，例如从服务器获取数据、添加新记录、更新已有信息以及删除不需要的数据。这些操作如果直接写在组件内部会导致代码冗余且难以维护。通过 Composables 可以有效解决这些问题。

示例一：数据查询

假设要在一个列表页中展示用户信息，首先需要调用后端 API 获取数据。

import { ref, onMounted } from 'vue';
import axios from 'axios';

export function useFetchUsers() {
  const users = ref([]);
  
  async function fetchUsers() {
    try {
      const response = await axios.get('/api/users');
      users.value = response.data;
    } catch (error) {
      console.error('Failed to fetch users:', error);
    }
  }

  onMounted(fetchUsers);

  return { users };
}

在组件中使用该 Composable：

<template>
  <ul>
    <li v-for="user in users" :key="user.id">{{ user.name }}</li>
  </ul>
</template>

<script setup>
import { useFetchUsers } from './composables/useFetchUsers';

const { users } = useFetchUsers();
</script>

示例二：数据增删改

对于数据的增删改操作，同样可以利用 Composable 进行封装。

export function useCRUD() {
  const addRecord = async (record) => {
    // 发送 POST 请求添加新记录
    await axios.post('/api/users', record);
  };

  const updateRecord = async (id, updatedData) => {
    // 发送 PATCH 请求更新指定ID的记录
    await axios.patch(`/api/users/${id}`, updatedData);
  };

  const deleteRecord = async (id) => {
    // 发送 DELETE 请求删除指定ID的记录
    await axios.delete(`/api/users/${id}`);
  };

  return { addRecord, updateRecord, deleteRecord };
}

在组件中使用该 Composable：

<template>
  <button @click="addUser">添加用户</button>
  <!-- 更多按钮与表单用于更新和删除 -->
</template>

<script setup>
import { useCRUD } from './composables/useCRUD';

const { addRecord, updateRecord, deleteRecord } = useCRUD();

async function addUser() {
  const newUser = { name: 'John Doe', email: 'john@example.com' };
  await addRecord(newUser);
}
</script>