持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第24天，点击查看活动详情

前言

上一节我们对todos的数据处理做了封装，这一节，我们要对todos数据的操作做一下封装。

todos数据操作封装

目前我们对于todos数据的操作逻辑，还都是放在组件中的，现在我们把这部分逻辑抽离出来。

抽离添加todo的逻辑

• useAddTodo.js

import { ref, inject } from 'vue';

export const useAddTodo = () => {
  const input = ref('');
  // 拿todo的数据
  const { todos } = inject('todosStore');
  /**
   * 添加todo
   * @returns
   */
  const addTodo = () => {
    const text = input.value;
    if (!text) return;
    todos?.value.push({ id: Symbol(), text, completed: false });
    console.log(todos?.value);

    input.value = '';
  };
  return {
    input,
    addTodo
  };
};

• 使用

• 封装之后，我们在使用的时候只关心返回值和方法就可以了，具体逻辑到useAddTodo.js去查看

抽离移除todo方法

• 由于编辑的逻辑中用到了移除方法，所以我们先封装这一部分。
• useRemoveTodo.js

import { inject } from 'vue';
export const useRemoveTodo = () => {
  // 拿todo的数据
  const { todos } = inject('todosStore');
  /**
   * 删除todo
   * @param todo
   */
  const removeTodo = (todo) => {
    todos?.value.splice(todos.value.indexOf(todo), 1);
  };
  return {
    removeTodo
  };
};

抽离编辑todo逻辑

编辑todo的逻辑包括：编辑、取消编辑、完成编辑的操作

import { ref } from 'vue';
import { useRemoveTodo } from '@/todos/useRemoveTodo';
export const useEditTodo = () => {
  const { removeTodo } = useRemoveTodo();

  // 正在编辑的todo
  const editingTodo = ref(null);
  // 编辑之前的文本
  const beforeEditText = ref('');
  // 编辑
  const editTodo = (todo) => {
    editingTodo.value = todo;
    beforeEditText.value = todo.text;
  };
  // 完成编辑
  const doneEdit = (todo) => {
    if (!editingTodo.value) return;
    todo.text || removeTodo(todo);
    editingTodo.value = null;
  };
  // 取消编辑
  const cancelEdit = (todo) => {
    editingTodo.value = null;
    todo.text = beforeEditText.value;
  };
  return {
    editingTodo,
    editTodo,
    doneEdit,
    cancelEdit
  };
};

我们再来对比一下 编辑的逻辑比较复杂，抽离了以后，我们组件中的代码瞬间变简洁了。

总结

通过vue3的组合式api和响应式依赖注入我们完成了整个项目逻辑的封装，整个项目变得更易维护了，更加好用了。这就是组合式api的魅力，后面我们会更多的用到这种模式。

项目代码在GitHub，可以查阅。