如何使用 Vue.js 中的雙向數據綁定在父組件和子組件中保持相同的值

Question

我有兩個組件，組件 A 和組件 B

在組件 A 中，我有兩個按鈕

如圖所示，我有Start和Stop按鈕。 如果我點擊Start按鈕， Stop按鈕將被啟用， Start將被禁用。

現在我的問題是如果我點擊Start按鈕，如果我導航到其他頁面，如果我回到頁面， Start按鈕被啟用， Stop按鈕被禁用。

期望是如果我單擊“ Start ”按鈕，當導航到另一個組件並返回該組件時，它仍應處於禁用模式，而Stop按鈕應處於啟用模式

 <button @click="start" class="start-button" icon-left="play" :disabled="!allowStart">Start</button>

 <button @click="stop" class="stop-button" icon-left="stop" :disabled="allowStart">Stop</button>

 data() {
    return {
     allowStart: true,
    };
  }


start() {
this.allowStart = false; 
}
stop() {
  this.allowStart = true;
}

誰可以幫我這個事。 感謝您的幫助和提前回復。

Answer 1

當您離開和返回時，聽起來組件正在被破壞和重新創建。 在這種情況下，組件無法記住allowStart的值是什么。

要么您必須重新設計組件架構，以便在您導航時保持此特定組件，要么您需要使用某種全局 state 管理系統。 最好的選擇可能是使用vuex 。 如果使用vuex存儲allowStart的allowStart ，那么在重新創建組件時，可以讀取state的值。

如果由於某種原因你不想使用vuex ，你也可以使用瀏覽器的localStorage