如何观察 vue.js 中的 state/UI 变化

Question

有什么方法可以观察 UI 中的状态变化？

例如，在我的数据组件中，我有一个名为 loggedIn 的变量。如果 loggedIn 的值等于 false，我希望我的 header 显示一个 Login link。同样，如果 loggedIn 的值等于 true，我希望我的 header 显示 Logout link。到目前为止我已经尝试过：

<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

Update 我刚刚意识到 this.isLoggedIn 是您组件中的一个方法，而不是在组件外部。看起来您应该将 isLoggedIn 设为 computed 并在您的指令中使用它。

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

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

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

可能是登录发生在该组件的父树上。在那种情况下，loggedIn 应该作为 prop.

出现

如何观察 vue.js 中的 state/UI 变化

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

javascript

watch

vue.js