Vue组件中的反应性问题

Question

感谢阅读，我对这种反应性行为感到很困惑。我在导航栏上有按钮，根据应用组件（App.vue）中的条件显示：

<button
 type="button"
 v-if="loggedIn()"
 @click="logout"
 class="btn btn-outline-light"
>

与相关的脚本：

methods: {
   loggedIn() {
     return !(auth.getUser() == null);
   },

这里一切正常，登录后会出现注销按钮。现在我被指示将设计更改为侧边栏，并使用完全相同的 html 和脚本创建侧边栏组件 (SideBar.vue)。唯一的问题是，按钮对更改没有反应。唯一的区别是导航栏在 App.vue 中，而 SideBar 是 App 的一个组件，如下所示：

<template>
  <div id="app">
    <div id="nav">
      <nav class="navbar navbar-expand-lg navbar-light ">
        // navbar elements with reactive buttons
      </nav>
      <side-bar />
    </div>
    <main>
     <router-view />
    </main>
  </div>
</template>

编辑： 我试图在组件中使用计算属性但没有成功。 我找到了一种通过将属性从应用程序传递到侧边栏组件来使其工作的方法，但我不喜欢它，因为我可能稍后必须进行扩展。有任何想法吗？提前致谢。

Answer 1

我认为这里的结构总体上是行不通的。就像其他人说的那样，最好使用计算属性，但这不是问题所在。

基本上，一旦应用加载，您应该调用auth.getUser()，例如在您的mounted() 或created() 处理程序中；

// Sidebar.vue or your Root new Vue()
{
    data() {
        return {
            user: null,
        };
    },
    created() {
        this.user = auth.getUser();
    },
}

<button
 type="button"
 v-if="user"
 @click="logout"
 class="btn btn-outline-light">

您可以将其添加到侧边栏组件中，但通常最好在应用程序根组件上处理身份验证或使用 Vuex，因为您经常需要知道您是否在应用程序的多个部分登录。

如果您想将 created() 处理程序和用户变量添加到您的根组件，您可以像这样访问它；

<button
 type="button"
 v-if="$root.user"
 @click="logout"
 class="btn btn-outline-light">

Answer 2

使用计算属性绑定 v-if，如下所示：

computed: {
  loggedIn () {
    return !(auth.getUser() === null)
  }
}

更多：https://vuejs.org/v2/guide/computed.html

Answer 3

此处不能使用计算属性，计算属性永远不会更新，因为 return !(auth.getUser() === null) 不是反应性依赖项。

相比之下，只要发生重新渲染，方法调用将始终运行该函数。那么解决方案是按照Michael Thiessen 的记录重新渲染侧栏：

<side-bar :key="loggedIn()"/>