浅谈 Vue3 的模块拆分与 API 重写

// useCounter.js
import{ ref }from'vue';
exportfunctionuseCounter(){
const count =ref(0);
constincrement=()=>{
    count.value++;
};
constdecrement=()=>{
    count.value--;
};
return{
    count,
    increment,
    decrement
};
}

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>
<script setup>
import { useCounter } from './useCounter';
const { count, increment, decrement } = useCounter();
</script>

// useFetch.js
import{ ref }from'vue';
exportfunctionuseFetch(url){
const data =ref(null);
const error =ref(null);
const loading =ref(false);
constfetchData=async()=>{
    loading.value=true;
try{
const response =awaitfetch(url);
      data.value=await response.json();
}catch(err){
      error.value= err;
}finally{
      loading.value=false;
}
};
return{
    data,
    error,
    loading,
    fetchData
};
}

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="loading">Loading...</div>
    <div v-if="error">{{ error.message }}</div>
    <pre v-if="data">{{ data }}</pre>
  </div>
</template>
<script setup>
import { useFetch } from './useFetch';
const { data, error, loading, fetchData } = useFetch('https://api.example.com/data');
</script>

// useForm.js
import{ ref }from'vue';
exportfunctionuseForm(initialValues){
const values =ref(initialValues);
const errors =ref({});
constvalidate=(field, value)=>{
if(field ==='email'){
      errors.value.email=!/^\S+@\S+\.\S+$/.test(value)?'Invalid email':'';
}elseif(field ==='password'){
      errors.value.password= value.length<6?'Password too short':'';
}
};
consthandleChange=(field, value)=>{
    values.value[field]= value;
validate(field, value);
};
return{
    values,
    errors,
    handleChange
};
}

<template>
  <form @submit.prevent="submit">
    <div>
<label for="email">Email:</label>
<input id="email" v-model="values.email" @blur="handleChange('email', values.email)" />
<p v-if="errors.email">{{ errors.email }}</p>
</div>
<div>
<label for="password">Password:</label>
<input id="password" type="password" v-model="values.password" @blur="handleChange('password', values.password)" />
<p v-if="errors.password">{{ errors.password }}</p>
</div>
<button type="submit">Submit</button>
  </form>
</template>
<script setup>
import { ref }from'vue';
import{ useForm }from'./useForm';
const initialValues =ref({
email:'',
password:''
});
const{ values, errors, handleChange }=useForm(initialValues.value);
constsubmit=()=>{
handleChange('email', values.value.email);
handleChange('password', values.value.password);
if(!errors.value.email&&!errors.value.password){
// 提交表单逻辑
}
};
</script>