[英]Vuex state change doesn't make component re-render?
I have a navbar which has conditional rendering depending on authentication: 我有一个导航栏,根据身份验证具有条件渲染:
<template>
<div id="routing">
<b-navbar variant="light" type="light">
<b-navbar-brand>
<img id="drage" src="../assets/icon.svg"/>
<b-nav-text id="txt">
drac1
</b-nav-text>
<div v-if="loggedIn === true">
<router-link id="link" to="/" exact>
Home
</router-link>
<router-link id="link" to="configuration" exact>
Config
</router-link>
<b-nav-text id="hellotext">
Hello, {{ username }}
</b-nav-text>
</div>
</b-navbar-brand>
</b-navbar>
</div>
</template>
<script>
export default {
name: 'topnavbar',
data () {
console.log(this.$store.state.loggedIn) // Changes from false to true as it is supposed to, and logs it.
return {
username: this.$store.state.username,
loggedIn: this.$store.state.loggedIn
}
}
}
</script>
THe value loggedIn
which the conditional render depends upon does change from false
to true
when the user has logged in. However, the router-link
items as well as the username nav text never show up. 当用户登录时,条件渲染依赖的值
loggedIn
会从false
变为true
。但是, router-link
项以及用户名nav文本永远不会显示。
Why doesn't a change in store state trigger a re-render of the navbar in this case? 在这种情况下,为什么存储状态的更改不会触发重新渲染导航栏?
You are using it wrong, in order for the changes to be reflected you need to use computed properties: 您使用它是错误的,为了反映更改您需要使用计算属性:
export default {
name: 'topnavbar',
data () {
return {
}
},
computed: {
username(){
return this.$store.state.username
},
loggedIn(){
return this.$store.state.loggedIn
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.