3 回答

TA貢獻2011條經驗 獲得超2個贊
問題是組件的狀態不是持久的。
有多種解決方案。
1. 全局管理狀態Vuex
這可能是處理這種情況的默認或最常見的方式。您無需將數據存儲在組件中,而是使用該庫來管理狀態。很可能你可以在你的項目中實現 vuex 而不是繼續閱讀。這是一個可靠的選擇,有太多優點無法一一列舉。
2.在父組件中封裝表單狀態。
您可以在父對象內為相關數據創建狀態,而不是在步驟組件內管理狀態。
例子:
<Step2
v-if="step === 2"
:formData="formData"
:updateFormData="updateFormData"
:nextStep="() => gotoStep(3)"
></Step2>
這個想法是Step2組件將通過 prop 傳入數據formData。每當數據發生變化時,updateFormData都會用新數據調用函數。您甚至可以利用v-model.
3. DIY商店
如果您使用的是 Vue js 2 (>= 2.6, < 3),您可以使用observable
查看 2.6+
創建一個store.js文件
import Vue from "vue";
export const store = Vue.observable({
step: 1,
isFormCompleted: false,
isBreedSelected: false,
isNameCompleted: false,
loading: false,
isLoaderFinished: false,
});
然后你可以從任何組件調用你的store.js,如果你將它分配給this鉤子beforeCreate,你可以像數據一樣使用它(this.store.isFormCompleted在腳本中,store.isFormCompleted在模板中)
import { store} from 'store.js';
//...
beforeCreate(){
this.store = store;
}
如果你想跳過額外的store.,你甚至可以解構存儲對象。
視圖 3
與那里的另一個類似,但使用一個reactive()(或多個ref())。如果您想讓我對此進行擴展,請告訴我。

TA貢獻1829條經驗 獲得超13個贊
如果每個步驟都是它自己的組件,你可以使用keep-alive組件來緩存組件和它們的狀態,這樣當你在它們之間切換時,它們的狀態會被保留。在這種情況下,我個人更喜歡它而不是使用 Vuex,因為它更簡單。
<keep-alive>
? ? <step-1-component v-if="step === 1"></step-1-component>
? ? <step-2-component v-if="step === 2"></step-2-component>
? ? <step-3-component v-if="step === 3"></step-3-component>
</keep-alive>

TA貢獻1818條經驗 獲得超3個贊
之所以如此,是因為當你回到第一頁時組件正在重新渲染,所以所有的默認狀態都會生效。嘗試使用Vuex保存您的狀態,以便所有組件都由商店中的狀態控制。
添加回答
舉報