vue3使用composables来取代mixins 来状态复用

前言

最简单理解composables的方式 就是将其视为vue版的自定义hooks

来个demo

比如 页面初始化的时候 我需要请求接口 获取数据 并回填至表单

以前的做法

src/pages/index.vue

<script setup lang="ts">
import { ref, onBeforeMount } from "vue";
import { FormInit } from "./types";
import api from "../../service";

onBeforeMount(() => {
  syncForm();
});

// 表单字段
const form = ref<FormInit>({name:'张三',phone:18211223344});

// 获取基本信息 初始化的时候 回显表单信息
const synctForm = async () => {
  const { data } = await api.getFormDate();
  form.value = data.data;
};

// 提交
const onSubmit = async (values: any) => {
  console.log(values);
};
</script>

<template>
  <van-nav-bar title="表单收集" />
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="form.name"
        name="name"
        label="姓名"
        :required="true"
      />
      <van-field
        v-model="form.phone"
        type="number"
        name="phone"
        label="手机号"
        :required="true"
      />
    </van-cell-group>
    <div>
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

现在的做法

src/composables/index.ts

（可以看得出 它就像一个没有模板的vue组件）

import axios from "axios";
import { ref, onBeforeMount } from "vue";
import api from "../service";

// 初始化时回显表单信息
export const useForm = <T>(formInit: T) => {
  onBeforeMount(() => {
    syncForm();
  });
  const form = ref<T>(formInit);
  const syncForm = async () => {
    const { data } = await api.getFormDate();
    form.value = { ...formInit, ...data.data };
  };
  return { form , syncForm };
};

src/pages/index.vue

<script setup lang="ts">
import { useForm } from "../../composables";
import { FormInit } from "./types";

// 表单字段
const { form } = useForm <FormInit>({name:'张三',phone:18211223344});

// 提交
const onSubmit = async (values: any) => {
  console.log(values);
};
</script>

<template>
  <van-nav-bar title="表单收集" />
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <van-field
        v-model="form.name"
        name="name"
        label="姓名"
        :required="true"
      />
      <van-field
        v-model="form.phone"
        type="number"
        name="phone"
        label="手机号"
        :required="true"
      />
    </van-cell-group>
    <div>
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>

核心部分

核心变化是：将状态的定义和赋值 抽离出去了

之前的index.vue

onBeforeMount(() => {
  syncForm();
});

// 表单字段
const form = ref<FormInit>({name:'张三',phone:18211223344});

// 获取基本信息 初始化的时候 回显表单信息
const synctForm = async () => {
  const { data } = await api.getFormDate();
  form.value = data.data;
};

现在的index.vue

// 表单字段
const { form } = useForm <FormInit>({name:'张三',phone:18211223344});