template-MP/hooks/useState.js

import { ref, computed } from 'vue'
import tool from '@/common/utils/tool.js'

/**
 * 状态管理Hook
 * @param {any} initialState 初始状态
 * @returns {Object} 状态和操作方法
 */
export function useState(initialState) {
  const state = ref(initialState)

  /**
   * 设置状态
   * @param {any} newState 新状态
   */
  function setState(newState) {
    if (typeof newState === 'function') {
      state.value = newState(state.value)
    } else {
      state.value = newState
    }
  }

  /**
   * 重置状态到初始值
   */
  function resetState() {
    state.value = typeof initialState === 'function' ? initialState() : initialState
  }

  return {
    state: computed(() => state.value),
    setState,
    resetState,
  }
}

/**
 * 本地存储状态Hook
 * @param {string} key 存储键名
 * @param {any} defaultValue 默认值
 * @returns {Object} 状态和操作方法
 */
export function useStorageState(key, defaultValue = null) {
  const storageValue = tool.storage(key) ?? defaultValue
  const { state, setState, resetState } = useState(storageValue)

  /**
   * 设置状态并同步到本地存储
   * @param {any} newState 新状态
   */
  function setStorageState(newState) {
    if (typeof newState === 'function') {
      newState = newState(state.value)
    }

    setState(newState)
    tool.storage(key, newState)
  }

  /**
   * 清除本地存储中的值
   */
  function clearStorage() {
    tool.removeStorage(key)
    resetState()
  }

  return {
    state,
    setState: setStorageState,
    resetState: () => {
      clearStorage()
    },
    clearStorage,
  }
}

/**
 * 表单状态Hook
 * @param {Object} initialFormData 初始表单数据
 * @returns {Object} 表单状态和操作方法
 */
export function useFormState(initialFormData = {}) {
  const { state, setState, resetState } = useState({ ...initialFormData })

  /**
   * 设置表单项
   * @param {string} field 字段名
   * @param {any} value 字段值
   */
  function setField(field, value) {
    setState(prev => ({
      ...prev,
      [field]: value,
    }))
  }

  /**
   * 重置表单到初始状态
   */
  function resetForm() {
    resetState()
  }

  /**
   * 清空表单
   */
  function clearForm() {
    setState({})
  }

  /**
   * 批量设置表单值
   * @param {Object} values 表单值对象
   */
  function setFields(values) {
    setState(prev => ({
      ...prev,
      ...values,
    }))
  }

  /**
   * 获取表单验证器
   * @returns {Object} 验证器实例
   */
  function getValidator() {
    return tool.getValidator()
  }

  return {
    form: state,
    setField,
    resetForm,
    clearForm,
    setFields,
    getValidator,
  }
}