组合式函数的设计哲学
与表单复用实践

export default {
  data() {
    return {
      // 表单状态
      form: { username: '', password: '' },
      // 错误提示状态
      error: { username: '', password: '' },
      // 加载状态
      loading: false
    }
  },
  methods: {
    // 字段校验方法
    validateUsername() {
      if (!this.form.username) {
        this.error.username = '用户名不能为空'
        return false
      }
      this.error.username = ''
      return true
    },
    validatePassword() {
      if (!this.form.password) {
        this.error.password = '密码不能为空'
        return false
      }
      if (this.form.password.length < 6) {
        this.error.password = '密码长度不能少于6位'
        return false
      }
      this.error.password = ''
      return true
    },
    // 表单重置
    resetForm() {
      this.form = { username: '', password: '' }
      this.error = { username: '', password: '' }
    },
    // 表单提交
    async submitForm() {
      // 统一校验
      const nameValid = this.validateUsername()
      const pwdValid = this.validatePassword()
      if (!nameValid || !pwdValid) return
      
      this.loading = true
      // 模拟接口提交
      await this.$api.login(this.form)
      this.loading = false
      alert('提交成功')
    }
  }
}

<script setup>
import { ref } from 'vue'

// 1. 表单核心状态（业务聚合）
const form = ref({ username: '', password: '' })
const error = ref({ username: '', password: '' })
const loading = ref(false)

// 2. 字段校验逻辑（和对应状态紧邻）
const validateUsername = () => {
  if (!form.value.username) {
    error.value.username = '用户名不能为空'
    return false
  }
  error.value.username = ''
  return true
}

const validatePassword = () => {
  if (!form.value.password) {
    error.value.password = '密码不能为空'
    return false
  }
  if (form.value.password.length < 6) {
    error.value.password = '密码长度不能少于6位'
    return false
  }
  error.value.password = ''
  return true
}

// 3. 表单操作逻辑
const resetForm = () => {
  form.value = { username: '', password: '' }
  error.value = { username: '', password: '' }
}

const submitForm = async () => {
  if (!validateUsername() || !validatePassword()) return
  loading.value = true
  await new Promise(resolve => setTimeout(resolve, 1000))
  loading.value = false
  alert('提交成功')
}
</script>

import { ref } from 'vue'

// 通用表单组合式函数
export function useForm(initForm = {}, rules = {}) {
  // 私有化响应式状态
  const form = ref({ ...initForm })
  const error = ref({})
  const loading = ref(false)

  // 初始化错误对象
  const initError = () => {
    Object.keys(rules).forEach(key => {
      error.value[key] = ''
    })
  }
  initError()

  // 通用字段校验
  const validateField = (key: string) => {
    const rule = rules[key]
    if (!rule) return true

    const value = form.value[key]
    // 必填校验
    if (rule.required && !value) {
      error.value[key] = rule.message
      return false
    }
    // 自定义正则校验
    if (rule.pattern && !rule.pattern.test(value)) {
      error.value[key] = rule.message
      return false
    }
    error.value[key] = ''
    return true
  }

  // 全局表单校验
  const validate = () => {
    let isValid = true
    Object.keys(rules).forEach(key => {
      if (!validateField(key)) isValid = false
    })
    return isValid
  }

  // 重置表单
  const reset = () => {
    form.value = { ...initForm }
    initError()
  }

  // 通用提交方法
  const submit = async (callback: () => Promise<void>) => {
    if (!validate()) return
    loading.value = true
    try {
      await callback()
    } finally {
      loading.value = false
    }
  }

  // 对外暴露状态和方法（按需导出，封装内部逻辑）
  return {
    form,
    error,
    loading,
    validateField,
    validate,
    reset,
    submit
  }
}

<script setup>
// 引入通用组合式函数
import { useForm } from '@/composables/useForm'

// 传入初始化表单、自定义校验规则，快速生成表单能力
const { form, error, loading, reset, submit } = useForm(
  // 初始值
  { username: '', password: '' },
  // 自定义校验规则（业务层配置）
  {
    username: { required: true, message: '用户名不能为空' },
    password: { 
      required: true, 
      pattern: /^.{6,}$/, 
      message: '密码长度不能少于6位' 
    }
  }
)

// 仅编写业务专属提交逻辑
const handleSubmit = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log('表单数据：', form.value)
      resolve()
    }, 1000)
  })
}
</script>

<template>
  <div class="login-form">
    <div>
      <input v-model="form.username" placeholder="请输入用户名" />
      <p class="error">{{ error.username }}</p>
    </div>
    <div>
      <input v-model="form.password" type="password" placeholder="请输入密码" />
      <p class="error">{{ error.password }}</p>
    </div>
    <button @click="submit(handleSubmit)" :disabled="loading">
      {{ loading ? '提交中...' : '登录' }}
    </button>
    <button @click="reset">重置</button>
  </div>
</template>