计算属性未触发 v-if 块答案

【问题标题】：Computed property is not triggering v-if block计算属性未触发 v-if 块
【发布时间】：2019-11-27 11:47:06
【问题描述】：

我是 Vue.js 的新手，我迷失了监视/计算属性。我已经检查了关于 SO 的其他答案，但似乎没有任何帮助。

我正在构建一个非常基本的身份验证检查机制，我在 localStorage 中存储一个值并检查它是否可以显示组件。

如果我的 v-if 块没有按预期运行，它会在重新加载后触发，而不是触发预渲染。我做错了什么？

<template>
    <div class="container-fluid h-100">
        <div class="wrapper">
            <nav id="navigation" v-if="isAuthenticated">
                <div class="navigation-header">
                    <h3>Some content</h3>
                </div>
            </nav>

            <div id="content">
                <nav class="navbar navbar-expand-lg navbar-light bg-light inset-shadow" v-if="isAuthenticated">
                    <p>some content</p>
                </nav>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'App',
        computed: {
            isAuthenticated: function() {
                if (localStorage.getItem('authenticated') === 'true') {
                    return true
                } else {
                    return false
                }
            }
        },
    }
</script>

【问题讨论】：

localStorage 不是响应式的，因此计算属性的值永远不会从其初始值改变。
然后使用一个方法并运行它预渲染（例如created()）应该可以工作，但它没有，它仍然需要刷新页面
你确定 isAuthenticated() 实际上返回 true 吗？似乎可以正常工作：codeply.com/p/KCoVwYRdE2
@OscarCarballal 使用方法可以避免缓存问题，但是当localStorage 的内容发生变化时，仍然不会导致组件重新渲染。只有更改反应数据才能做到这一点。您需要确保当您更改 localStorage 的内容时，它也会更新一些反应性内容，然后让您的模板使用它，而不是尝试直接使用 localStorage。
@Zim 是的，它在正确的时间返回预期值

标签： vue.js

【解决方案1】：

您可以创建一个方法来检查经过身份验证的用户并在 created() 或mounted() 块中运行该方法。或者你可以使用 vuex，这是一个更好的选择

【讨论】：

我遇到了同样的问题。 if 块在我重新加载之前不会重新评估。 created() 应该在渲染之前运行，但由于某种原因 if 块没有反应。