如何在vue.js中觀察狀態/ UI更改

Question

有什么方法可以監視UI中的狀態變化嗎？

例如，在我的數據組件中，我有一個名為loggedIn的變量。 如果loggedIn的值等於false，則我希望標題顯示“ Login鏈接。 同樣，如果loggedIn的值等於true，則我希望標題顯示“ Logout鏈接。 到目前為止，我已經嘗試過：

<li v-if="loggedIn"><a v-link="{ path: 'login' }" v-on:click="logout()">Logout</a></li>
<li v-else><a v-link="{ path: 'login' }">Login</a></li>


data: function () {

    return {
      loggedIn: this.isLoggedIn() //this method returns true/false
    }

},

這樣的代碼具有預期的效果。 但是，僅在刷新組件后才能使用。 我希望loggedIn的值更改時相應地顯示Login/Logout ...有人可以幫忙嗎？

提前致謝！

Answer 1

更新我剛剛意識到this.isLoggedIn是您組件中的方法，而不是它之外的方法。 看起來您應該對isLoggedIn進行computed並在指令中使用它。

是的， 您可以在UI中監視狀態更改，但是Vue無法。 Vue不知道UI整體存在。 它只知道您所講述的內容（通常通過指令）。

在示例代碼中，您將loggedIn初始化為函數的輸出，但是在初始化之后，其值永遠不會更改。 在ViewModel之外沒有$watch 。

大概有一些登錄過程，其中UI狀態發生了變化。 由於ViewModel的目的是為應用程序建模，因此您應該將該登錄過程作為ViewModel中的一種method來實現。 要做的事情之一就是更改loggedIn變量的值。 通常，UI狀態應由data成員表示，任何更改UI狀態的method都應實現為method 。

登錄可能是在此組件的父樹上進行的。 在這種情況下， loggedIn應該作為prop進入。