Javascript vue组件中的反应性问题

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

使用关联的脚本：

方法：{
loggedIn（）{
返回！（auth.getUser（）==null）；
},

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

//带有反应按钮的导航栏元素

编辑： 我试图在组件中使用计算属性，但没有成功。

---

我找到了一种方法，通过将属性从应用程序传递到侧边栏组件使其工作，但我不喜欢它，因为我以后可能要进行缩放。有什么想法吗？请提前感谢。

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

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

---

此处的更多信息：

此处不能使用Computed，Computed属性将永远不会更新，因为

返回！（auth.getUser（）==null）

不是被动依赖项

相比之下，每当重新呈现时，方法调用始终会运行函数。然后，解决方案是重新呈现侧栏，如下所述：

---

我认为一般来说，结构在这里不起作用。正如其他人所说，使用计算属性更好，但这不是问题所在

基本上，只要应用程序加载，你就应该调用

auth.getUser（）

，例如在你的mounted（）或created（）处理程序中

//Sidebar.vue或您的根新vue（）
{
数据（）{
返回{
用户：null，
};
},
创建（）{
this.user=auth.getUser（）；
},
}

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

如果您想将created（）处理程序和用户变量添加到根组件中，您可以这样访问它

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

U应该使用计算属性而不是方法，这不是一个反应性错误。我也尝试过计算，它不起作用。如果您使用的是计算属性，那么您应该在模板中省略

（）

，即

v-If=“loggedIn”

。还有什么是

auth.getUser（）

do？我希望这不是一个异步方法或返回承诺的东西。谢谢Terry，如果你把括号放在vue对你大喊大叫的地方，并且没有auth.getUser（）不是异步的，它只是从localstorage获取令牌（jwt）并对其进行解析。我能说的唯一区别是，当我登录时，loggedIn（）在app.vue中调用，但在SideBar.vuei中不调用如果在应用程序的更多组件中都需要知道登录状态，那么设置一个标志或一些反应性数据可能是值得的，这样您就可以通过更传统的方式触发更新非常正确，我会这样做，我只是很沮丧没有这样做理解行为思想谢谢你指出设计缺陷。我一定会朝这个方向走。

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