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
    }

},

原样的代码具有所需的效果。但是，它仅在我的组件刷新时才有效。我希望Login/Logout在loggedIn的值发生变化时进行相应的渲染...有人可以帮忙吗？

提前致谢！

Answer 1

更新我刚才意识到this.isLoggedIn是您组件中的一种方法，而不是在其外部。看起来你应该isLoggedIn一个computed并在你的指令中使用它。

是的，你可以在UI中观察状态变化，但Vue不能。 Vue不知道整个UI存在。它只知道你告诉它的部分（通常是通过指令）。

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

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

可能是从此组件向父树发生登录。在这种情况下，loggedIn应该是prop。

如何在vue.js中查看状态/ UI更改

1 个答案: