v-if与v-show在false和true之间改变时组件不隐藏出现问题

当使用data、props或者vuex保存的布尔值来给v-if和v-show赋值，如：

却发现当我们用命令改变loginState时（true变flase），v-if的判断并没有消失。这里的v-if和v-show突然失效了。

（v-if代码）

（改变loginState的代码）

此时我们再看前端展示： 

 

 

 我们可以看到loginState是true，所以界面显示登陆界面，但是当我们点击登录后

可以看到loginState由true变成了false，但是登录界面并没有消失。此时确定v-if失效，在值为false时组件并没有消失。

我们回归基础知识，v-if判断的值为布尔值。我们用console.log(typeof this.$store.state.loginState)方法看一下我们的false的类型。

 发现false是string类型，所以当true变为false时，样式并没有改变，组件也没有消失。

我们使用Boolean(this.$store.state.loginState)，将String转化为布尔值后，就可以成功了运用v-if了。