假設有一個包含多個反應資料的組件。我們如何將它們重置回初始狀態?
<script setup>
const var_a = ref("");
const var_b = ref([]);
const var_c = ref({});
const var_d = ref(false);
const var_e = ref(1);
const var_f = ref("a");
...
</script>
在 vue 2 中,我們只需將 Object.assign() 與物件一起使用,并在需要時將其重新/定義為 data() 即可。
<script>
function initialData (){
return {
var_a: "",
var_b: [],
var_c: {},
var_d: false,
var_e: 1,
var_f: "a",
}
}
export default {
data: function (){
return initialState();
},
methods:{
resetData: function (){
Object.assign(this.$data, initialData());
}
}
}
</script>
但是在 vue 3 中它不是這樣作業的。
我可以宣告所有組件資料,const state然后回圈通過它,但感覺不是一種方便的方式。
那么在 vue 3 上重置它們的最佳方法是什么?
uj5u.com熱心網友回復:
如果需要重置整個狀態,則不應單獨定義。相反,它被定義為反應物件:
const state = reactive(initialState());
它可以像以前一樣重置:
Object.assign(state, initialState());
如果需要,可以單獨使用狀態:
const { var_a } = toRefs(state);
轉載請註明出處,本文鏈接:https://www.uj5u.com/caozuo/490538.html
