Javascript Vue.js：在用户登录或未登录时，根据Vuex存储状态在导航栏上显示/隐藏按钮

我正在创建一个导航栏，根据用户是否登录显示或隐藏按钮。 为此，我在Vuex和localStorage上保存状态

我正在尝试使用对象列表（即

rightMenu

）构建一个动态菜单，其中包含按钮信息（即路线、标题和指示用户登录时按钮是否显示的标志）

当用户登录系统时，

this.$store.state.auth.isUserLoggedIn

将更改为

true

，但是模板不会更改，当用户未登录时，按钮将保持相同的初始状态。 例如：当

此.$store.state.auth.isUserLoggedIn更新时，
注销
按钮不显示。
但当我单击“ctrl+F5”并重新加载页面时，按钮显示正确。
例如，在这种情况下，手动重新加载页面时，
注销
按钮正确显示

我正在考虑在用户登录或注销时强制重新加载页面，但是我认为这不是一个好的选择

有人能帮我吗

我在下面给出我正在使用的代码

先谢谢你

Menu.vue>模板


场地
...
{{item.title}

Menu.vue>脚本

导出默认值{
数据（）{
返回{
右菜单：[
{收件人：'/sign_in'，标题：'登录'
showButton:！this.$store.state.auth.isUserLoggedIn}，
{收件人：'/sign_up'，标题：'sign up'
showButton:！this.$store.state.auth.isUserLoggedIn}，
{收件人：'/sign_out'，标题：“sign out”
showButton:this.$store.state.auth.isUserLoggedIn}
]
}
},
...
}

store.js

const store=新的Vuex.store({
声明：{
认证：{
令牌：“”，
isUserLoggedIn:false
}
},
突变：{
setAuthToken（state，token）{//我在登录时使用它
state.auth.token=令牌
state.auth.isUserLoggedIn=！！令牌
localStorage.setItem（'store'，JSON.stringify（state））
},
cleanAuth（state）{//我在注销时使用它
state.auth={
令牌：“”，
isUserLoggedIn:false
}
localStorage.setItem（'store'，JSON.stringify（state））
}
}
...
})

编辑1:

当我在代码中显式使用
this.$store.state.auth.isUserLoggedIn时，它工作得很好。因此，按钮正确显示和消失。下面我举一个例子：

Menu.vue>模板


测试{{this.$store.state.auth.isUserLoggedIn}

因此，我认为问题在于
showButton
与
this.$store.state.auth.isUserLoggedIn
的绑定，使用
computed
属性使其
反应性
：



...
{{item.title}
...
...
计算：{
isUserLoggedIn（）{
return（title）=>{//您将没有任何缓存好处
如果（标题=='注销'）{
返回此。$store.state.auth.isUserLoggedIn；
}
return！this.$store.state.auth.isUserLoggedIn；
}
}
}
...
通过克里斯·李、安德烈·盖奥吉和萨吉布·汗的回答，我可以解决我的问题

Andrei Gheorghiu解释说我无法访问
data（）
中的计算属性，Chris Li建议我使用计算变量。这些答案加上萨吉布·汗（Sajib Khan）的例子，我能够在下面分享的解决方案中思考。我希望将来它能帮助别人

简而言之，我创建了一个计算属性，它返回我的数组，并且总是在
this.$store.state.auth.isUserLoggedIn
更新时，数组会一起更改（因此菜单也会随之更改）

我打算为我的
this.$store.state.auth.isUserLoggedIn
创建一个映射器。一旦我这样做了，我就会更新答案

非常感谢你们


导出默认值{
数据（）{
返回{…}
},
计算：{
右菜单（）{
返回[
{标题：'登录'，收件人：'/登录'，
showButton:！this.$store.state.auth.isUserLoggedIn}，
{标题：'注册'，收件人：'/注册'，
showButton:！this.$store.state.auth.isUserLoggedIn}，
{标题：'注销'，收件人：'/注销'，
showButton:this.$store.state.auth.isUserLoggedIn}
]
}
}
}

编辑1：使用MapGetter的解决方案

菜单.vue


从“vuex”导入{mapGetters}
导出默认值{
数据（）{
返回{…}
},
计算：{
…地图绘制者([
'isUserLoggedIn'
]),
右菜单（）{
返回[
{标题：'登录'，收件人：'/登录'，
showButton:！this.$store.state.auth.isUserLoggedIn}，
{标题：'注册'，收件人：'/注册'，
showButton:！this.$store.state.auth.isUserLoggedIn}，
{标题：'注销'，收件人：'/注销'，
showButton:this.$store.state.auth.isUserLoggedIn}
]
}
}
}

store.js

我添加了以下getter：

。。。
吸气剂：{
isUserLoggedIn（状态）{
返回state.auth.isUserLoggedIn
}
}
...
与其像当前一样从存储访问属性，不如将其映射到计算变量并使用它。谢谢Chris Li，通过您的提示，我解决了我的问题，并编写了一个答案。我已尝试执行这些步骤，但出现以下错误：
[Vue warn]：渲染错误：“TypeError:_vm.isUserLoggedIn不是函数”
。是否可以在计算属性中传递值？否，
computed
方法不接受任何参数。更新后的答案，您现在可以尝试吗？我已完成测试