如何实现v-alert不关闭状态下每秒自动刷新以同步localStorage数据

你需要让v-alert保持显示状态的同时，每秒自动读取localStorage中的数据并更新展示内容，以下是优化后的实现方案：

问题分析 #

你之前的代码存在两个主要问题：一是totalAndYetToCallCounts初始值为空字符串，模板中直接访问它的属性会触发报错；二是直接在created中启动setInterval却未清理，组件销毁后定时器仍会运行，造成内存泄漏。

完整实现代码 #

模板部分 #

<v-alert
  style="position: fixed;left: 35%;top: 7%;"
  border="left"
  close-text="Close Alert"
  color="deep-purple accent-4"
  dark
  dismissible
  text-align='center'
  v-model="alert"
>
  Yesterday's Leads: {{ totalAndYetToCallCounts.previousLeads }} and Today's Leads: {{ totalAndYetToCallCounts.TodaysLeads }}.
</v-alert>

脚本部分 #

export default {
  data () {
    return {
      // 初始化为带默认值的对象，避免模板访问属性报错
      totalAndYetToCallCounts: { previousLeads: 0, TodaysLeads: 0 },
      alert: true,
      // 保存定时器ID，用于后续清除
      refreshTimer: null
    }
  },
  created () {
    // 页面加载时先读取一次数据
    this.loadLocalStorageData()
    // 启动每秒刷新的定时器
    this.refreshTimer = setInterval(() => {
      this.loadLocalStorageData()
    }, 1000)
  },
  beforeUnmount () {
    // 组件销毁时清除定时器，防止内存泄漏
    if (this.refreshTimer) {
      clearInterval(this.refreshTimer)
    }
  },
  watch: {
    alert (newVal) {
      if (!newVal) {
        setTimeout(() => {
          this.alert = true
          // 弹窗重新打开时同步最新数据
          this.loadLocalStorageData()
        }, 1000)
      }
    }
  },
  methods: {
    // 封装读取localStorage的方法，复用逻辑
    loadLocalStorageData () {
      const storedData = localStorage.getItem('getTotalAndYetToCallCount')
      if (storedData) {
        this.totalAndYetToCallCounts = JSON.parse(storedData)
      }
    }
  }
}

关键说明 #

• 初始化数据：将totalAndYetToCallCounts初始化为包含对应属性的对象，避免页面渲染时因访问空字符串的属性而抛出错误。
• 定时器管理：保存定时器ID，在组件销毁的beforeUnmount钩子中清除定时器，防止组件销毁后定时器持续运行消耗资源。
• 逻辑复用：把读取localStorage的逻辑封装成方法，在初始化、定时刷新、弹窗重新打开时统一调用，减少代码重复。
• 自动更新展示：只要更新totalAndYetToCallCounts这个响应式数据，Vue会自动触发v-alert的内容更新，无需手动修改alert的显示状态。

内容的提问来源于stack exchange，提问作者Jazz