Vue3 Hooks Modular Extraction

Vue3In fact Hooks, it is the separation of business logic, which is essentially the same as in the middle: extract the business logic of the current component into a common file, improve logic reusability, and make the current component look more refreshing and not the Vue2same mixinThe point is that when we encapsulate hooks, we usually return a function.

Let's look at a simple example first: todoListdemo.

Create a new Vue3+Ts project: npm init vite@latestproject name: vue3-hooks, use TS, then cd vue3-hooks-> npm install-> npm run devthen delete unnecessary content, create a new typefolder to store all types, and create a new one TodoList.vueto write our business and view code: The current directory structure is as follows :

TodoList.vuecode show as below:

<template>
  <h1>To do List</h1>
  添加一条记录: <input type="text" v-model="data.toAddData.title" />
  <button @click="onAdd">添加</button>
  <br />
  <br />
  <table>
    <thead>
      <tr>
        <td>id</td>
        <td>名称</td>
        <td>是否完成</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data.list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.isFinished }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { IntTodoList } from "../type/todoList";

type DataType = {
  list: IntTodoList[];
  toAddData: IntTodoList;
};
const data = reactive<DataType>({
  list: [],
  toAddData: {
    id: 0,
    title: "",
    isFinished: false,
  },
});
const onAdd = () => {
  data.list.push({ ...data.toAddData, id: data.list.length + 1 });
};
</script>

复制代码

Defined types file:

interface IntTodoList {
  id: number;
  title: string;
  isFinished: boolean;
}

export type { IntTodoList };

复制代码

Next, start to extract the logic:

1. Create a new hooksfolder, create a new file hooksin the folder , extract the data and methods in the file into the file, and export:todoList.tsTodoList.vuedataonAddhooks

import { reactive } from "vue";
import { IntTodoList } from "../../type/todoList";

export default () => {
  type DataType = {
    list: IntTodoList[];
    toAddData: IntTodoList;
  };

  const data = reactive<DataType>({
    list: [],
    toAddData: {
      id: 0,
      title: "",
      isFinished: false,
    },
  });
  const onAdd = () => {
    data.list.push({ ...data.toAddData, id: data.list.length + 1 });
  };
  return { data, onAdd}
};

复制代码

2. Import in TodoList.vue:

<template>
  <h1>To do List</h1>
  添加一条记录: <input type="text" v-model="data.toAddData.title" />
  <button @click="onAdd">添加</button>
  <br />
  <br />
  <table>
    <thead>
      <tr>
        <td>id</td>
        <td>名称</td>
        <td>是否完成</td>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in data.list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.isFinished }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">

import TodoListHooks from './hooks/todoList'

const {data, onAdd} = TodoListHooks()

</script>

复制代码

If other components need datadata and onAddmethods , you can also import hooksthe file to use, and now look TodoList.vueat the file looks very refreshing. The function is the same as before:

full code