1. reactive
在做項(xiàng)目的時(shí)候通常會(huì)遇到這種情況竿报，比如我們有一個(gè) Table 顯示數(shù)據(jù)，添加 Table 數(shù)據(jù)的時(shí)候使用 dialog 彈出，在里面填寫字段然后添加。
在 vue3 中吊圾，對于對象的響應(yīng)式定義推薦使用 reactive ，那么可以寫入如下代碼:
const dialogRuleForm = reactive({
title: "",
status: "",
author: "",
});
2. 添加編輯功能
現(xiàn)在添加一個(gè)新功能：編輯翰蠢，我希望添加和編輯使用同一個(gè) dialog, 畢竟兩者字段相同,使用數(shù)據(jù)賦值即可项乒。
fetchApi({id: row.id})
.then((res) => {
dialogRuleForm = res.data;
})
會(huì)發(fā)現(xiàn)，這樣賦值不會(huì)產(chǎn)生效果梁沧，那么怎么修改呢檀何。
3. 修改
有三種方法：
- 使用
ref，把reactive改成ref,如下：
const dialogRuleForm = ref({
title: "",
status: "",
author: "",
});
fetchApi({id: row.id})
.then((res) => {
dialogRuleForm.value = res.data;
})
千萬別忘記廷支，ref 后面要用 .value, 建議使用 vscode 的 volar 插件频鉴，勾選 ref sugar.
- 接著使用
reactive, 不過用一個(gè)key值代表，如下：
const dialogRuleForm = reactive({
value: {
title: "",
status: "",
author: "",
},
});
fetchApi({id: row.id})
.then((res) => {
dialogRuleForm.value = res.data;
})
好像和 ref 在使用上沒區(qū)別恋拍。
- 使用
Object.assign(), 如下：
const dialogRuleForm = reactive({
title: "",
status: "",
author: "",
});
fetchApi({id: row.id})
.then((res) => {
// 如果 res.data 是一個(gè)對象
Object.assign(dialogRuleForm, res.data);
// 如果 res.data 是一個(gè)數(shù)組
Object.assign(dialogRuleForm, {...res.data});
})
- 小技巧
如果使用同一個(gè)dialog組件垛孔，當(dāng)關(guān)閉dialog時(shí)，需要清空組件內(nèi)的數(shù)據(jù)施敢，如果你的字段過多周荐，就會(huì)變成如下情況：
Object.assign(dialogRuleForm, {
xxx: "",
xxx: "",
...
});
這樣寫的很累，我們可以在定義 reactive 數(shù)據(jù)的時(shí)候再定義一個(gè) reset, 如下：
const resetForm = reactive({ ...dialogRuleForm });
這樣清空數(shù)據(jù)的時(shí)候就可以這樣使用：
Object.assign(dialogRuleForm, resetForm);
