如何在vue.js中观察状态/UI的变化

How to watch for state/UI changes in vue.js

本文关键字：状态 UI 变化 观察 vue js      更新时间：2023-09-26

是否有一种方法可以观察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
    }
},

这样的代码具有预期的效果。但是，它只有在我的组件被刷新时才能工作。我希望Login/Logout在loggedIn的值发生变化时相应地渲染…有人能帮忙吗?

提前感谢!

更新我刚刚意识到this.isLoggedIn是您组件中的方法，而不是在它之外。看起来你应该把isLoggedIn改成computed，并在你的指令中使用它。

是的，你可以监视UI中的状态变化，但是Vue不能。我们不知道UI作为一个整体存在。它只知道你告诉它的部分(通常通过指令)。

在您的示例代码中，您将loggedIn初始化为函数的输出，但是在初始化之后，它的值永远不会改变。对于ViewModel之外的东西没有$watch。

可以推测，在某个登录过程中UI状态发生了变化。由于ViewModel的目的是对应用程序建模，因此您应该实现它在ViewModel中作为method登录过程。它将做的事情之一是改变loggedIn变量的值。作为一般规则，UI状态应该由data成员表示，任何改变UI状态的操作都应该作为method来实现。

可能是在这个组件的父树上进行登录。在这种情况下，loggedIn应该作为prop出现。

相关文章：