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

Question

有没有办法可以观察 UI 中的状态变化？

例如，在我的数据组件中，我有一个名为 loggedIn 的变量。如果 loggedIn 的值等于 false，我希望我的标题显示 Login 链接。同样，如果 loggedIn 的值等于 true，我希望我的 header 显示 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 初始化为函数的输出，但初始化后，其值永远不会更改。没有$watch对于 ViewModel 之外的事物。

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

登录可能发生在该组件的父树上。在这种情况下，loggedIn 应该以 prop 的形式出现。 .