Javascript 第一次打开页面时的Vue JS条件呈现

我有一个vue组件，它应该在第一次打开页面时呈现，但我对它的逻辑有点困惑。我正在使用localStorage验证wasVisited项，我应该在某个地方将其设置为1，以便下次打开触发模式的视图时，模式不会显示，我只是不确定在哪里，mounted（）似乎不是我需要设置它的位置

<template v-if="localStorage.getItem('wasVisited') === null">
<div>
    <b-modal ref="disc" title="Hello" ok-only ok-variant="light" size="lg" body-bg-variant="dark" header-bg-variant="dark" header-text-variant="light" body-text-variant="light" footer-bg-variant="dark" footer-text-variant="light" title-class="text-light">
        <div class="text-justify modal-text">
            <p>Hi from modal</p>
        </div>
    </b-modal>
</div>
</template>

<script>
export default {
    methods: {
        showModal() {
            this.$refs['disc'].show()
        },
        hideModal() {
            this.$refs['disc'].hide()
        },
    },

    mounted() {
        console.log('Modal mounted.');
        this.showModal();
        localStorage.setItem('wasVisited', '1');
    }
}
</script>

你好，来自莫代尔

导出默认值{
方法：{
showModal（）{
此.$refs['disc'].show（）
},
hideModal（）{
此.$refs['disc'].hide（）
},
},
安装的（）{
console.log（'模态安装'）；
这是showModal（）；
setItem（'wasvistered'，'1'）；
}
}

编写代码的更好方法应该是

<template>
<div>
    <b-modal ref="disc" title="Hello" ok-only ok-variant="light" size="lg" body-bg-variant="dark" header-bg-variant="dark" header-text-variant="light" body-text-variant="light" footer-bg-variant="dark" footer-text-variant="light" title-class="text-light">
        <div class="text-justify modal-text">
            <p>Hi from modal</p>
        </div>
    </b-modal>
</div>
</template>

<script>
export default {
    methods: {
        showModal() {
            this.$refs['disc'].show()
        },
        hideModal() {
            this.$refs['disc'].hide()
        },
    },

    mounted() {
        console.log('Modal mounted.');
        if(localStorage.getItem('wasVisited') === null) this.showModal();
        localStorage.setItem('wasVisited', '1');
    }
}
</script>

你好，来自莫代尔

导出默认值{
方法：{
showModal（）{
此.$refs['disc'].show（）
},
hideModal（）{
此.$refs['disc'].hide（）
},
},
安装的（）{
console.log（'模态安装'）；
if（localStorage.getItem（'wasvisted'）==null）this.showmodel（）；
setItem（'wasvistered'，'1'）；
}
}

---

基本上我所做的是，我从模板中删除了你的v-if，而是将其添加到你的mounted属性中，这样，如果没有设置本地存储，就会自动调用显示模式的函数。同时，我们给wasviested分配一个值，我如何测试它在localhost上是否有效？它现在任何时候都不会显示，甚至在我初始化servernvm时也不会显示，我在incognito上打开了它，它显示了模式，确认了它的工作原理，谢谢你如果你想确认它的工作原理而不需要匿名，别忘了清除你的本地存储