关于vue3中响应式依赖注入provide/inject

关于# vue3中响应式依赖注入

场景：适合单组件（多层嵌套组件），解决父组件的响应式数据能够传递给所有子组件（包括孙子组件及以下）
优点：数据同步更新，并同步渲染视图，耦合逻辑处理更容易处理，更好的开发体验，推荐provide/inject 而非 vuex（繁琐）

// 父组件 script setup
// 创建响应式数据
const parentFormData = ref({});
// 依赖数据 - 定义 provide readonly不允许子组件直接修改 parentFormData，以免混乱
provide('parentFormData', readonly(parentFormData));

// 修改依赖变量 parentFormData 的方法
const changeReactivityReadonlyData = (val: any) => {
	// 合并对象
	Object.assign(parentFormData.value, val);
};
// 依赖函数
provide('changeParentFormData', changeReactivityReadonlyData);

const formData = reactive<T>({
	id: '',
	name: ''
})
// 传递 - 响应式, reactive 需要转一层解构才能保持响应式
changeReactivityReadonlyData({ ...toRefs(formData) });


// 子组件  script setup
// 定义any 是为了防止 parentFormData.value ts提示，可以研究一下 InjectionKey 的做法
const parentFormData: any = inject('parentFormData');
const changeParentFormData: any = inject('changeParentFormData');
const subFormData = ref<T>({
	age: ''
})

// 传递响应式, ref 需要 .value 在转一层， 保持响应式
changeParentFormData(toRefs(formData.value));