1 、可以全局声明；
2 、每个页面都声明一次，代码冗余了，因为做到了按需加载，程序执行效率反而更好。
3 、我们项目中的实践是：element ui 打底，常用类型不自行开发了；复杂业务逻辑字段，定制成组件（我好兄弟用自己名字命名的组件，开始看着头痛，后来习惯了）；整个表单需要复用，全局弹出呼出——表单、逻辑全复用了。
4 、有些变量，全局各处展示需要实时更新的，放在 pinia store 里面。

我不是职业搞前端的，对最佳实践了解有限。我们自研的 vue 项目按一般软件工程逻辑优化到这个程度。

方法 1. 父级声明出大对象，然后 v-model 将整个大对象 绑定到子组件；子组件内可以定义变量，也可以不声明变量，子组件可以监听到父组件传递给子组件的 value, 然后深拷贝覆盖子组件声明的变量（未声明直接赋值，当然必须声明个变量是 undefined ）， 修改这个变量，监听变量变化，$emit 传递出去给父组件。

方法 2. 父组件声明出大对象，对象结构明确。给每个子组件只传递需要的对象中的参数，只修改父组件对象中的某个参数，这样不方便于别的组件读取其他变量。(传递方法和上面一样。)

就不用 store 了。

我这是野路子，自己写代码摸索的。

data 中一般放一个 form 对象，内部属性对应每个表单内容
```js
data: {
form: {
name: undefine,
age: undefine,
......
}
}
```

优先用组件库的表单组件，这样直接 v-model 绑定 form.xxx 到组件库的组件上

如果需要复杂填写，通过传参或将 form.xxx 传入自定义组件，组件内部自行实现 v-model 或通过事件总线修改值

vue3 如果需要局部状态管理，业务上存在大量复用有必要封装的话，并且不需要考虑 ssr 的情况下，可以通过声明一个 Composition api 的函数（ hook ）做一个局部的变量初始化，然后用在需要的地方。这个在 https://cn.vuejs.org/guide/reusability/composables 亦有记载

但是如果会涉及到 ssr 的话，pinia 也可以做局部的模块化声明，就是麻烦一点
```
// 需要传参根据情况改变内容上的时候就给函数加参数
function useXXXFormData() {

const onShow = ref(true)

const formContextState = reactive({
xxx:12123,
xxl:123,
process:123,
onSync: false
})

// 内部使用 vue 的生命周期 api 比如销毁时清理
onBeforeUnmount(() => {
console.log("unmounted!");

})

return {
onShow,
formContextState
}
}
```
直接拿代码给你比方？
在需要拿来初始化调用的时候直接
const formstate = useXXXFormData()

不知道我理解的正确不正确

示例：

<script setup lang="ts">
const form = Provide(FormModel<TData>);
form.mode = FormMode.edit;
form.items = [
describeControl({
type: controlWrap('t-input'),
label: 'xxx：',
prop: 'yyy',
value: '',
validator: [FormValidator.required, FormValidator.max(50)],
options: {
placeholder: '请输入 xxx'
}
}),
];
form.resetData();
function onConfirm() {
form
.validate()
.then(() => {
return service.save(form.data);
})
.then(() => {
MessagePlugin.success('操作成功');
})
.catch((err) => {
MessagePlugin.error(err?.message || err);
});
};
</script>

<template>
<div v-if="form.data" v-grid.form="2" class="ph-20 gr-24 gc-12 mb-24">
<q-form-item prop="aaa"></q-form-item>
<q-form-item prop="bbb"></q-form-item>
<q-form-item v-if="form.data.bbb === '???'" prop="ccc"></q-form-item>
<q-form-item prop="ddd"></q-form-item>
</div>
</template>

<style scoped lang="less"></style>