如何在另一组件中无需刷新获取localStorage中的最新数值

现有两个组件，Helloworld 组件负责将值保存到 localStorage，New 组件读取并展示该值。使用 computed 属性获取数据时，必须刷新页面才能拿到最新值。

相关代码：

computed: {
  token: {
    get: function () {
      return this.tokenValue;
    },
    set: function (id_token) {
      this.tokenValue = id_token;
      localStorage.setItem("Num1", id_token);
    },
  },
}

问题原因 #

computed 属性依赖的是组件内部的 tokenValue，但 localStorage 属于浏览器存储，它的变化不会自动触发 Vue 组件的响应式更新，所以New 组件无法实时感知到值的变化。

解决方案 #

1. 全局状态管理（Vuex/Pinia）

这是跨组件状态共享最稳妥的方案：

• Vue2 用 Vuex：把 token 存在 Vuex 的 state 中，Helloworld 组件提交 mutation 更新 state 同时同步到 localStorage；New 组件直接从 state 取值，state 变化会自动触发组件更新。
• Vue3 用 Pinia：原理和 Vuex 一致，语法更简洁，全局状态变化后所有依赖的组件都会自动刷新。

2. 监听 localStorage 变化（适合简单场景）

在New 组件里添加 storage 事件监听，当 localStorage 被修改时手动更新组件数据：

mounted() {
  window.addEventListener('storage', this.handleTokenChange)
},
beforeUnmount() {
  window.removeEventListener('storage', this.handleTokenChange)
},
methods: {
  handleTokenChange(e) {
    // 只处理目标键值的变化
    if (e.key === 'Num1') {
      this.tokenValue = e.newValue
    }
  }
}

注意：storage 事件仅在其他窗口/标签页修改 localStorage 时触发，如果是同一页面内的组件修改，需要额外结合自定义事件通知。

3. 自定义事件实现同页面组件通信

修改Helloworld 组件的 computed setter，更新 localStorage 后触发自定义事件：

computed: {
  token: {
    get() {
      return this.tokenValue
    },
    set(id_token) {
      this.tokenValue = id_token
      localStorage.setItem("Num1", id_token)
      // 触发全局自定义事件通知其他组件
      this.$root.$emit('token-updated', id_token)
    },
  },
}

然后在New 组件里监听该事件：

mounted() {
  this.$root.$on('token-updated', (newToken) => {
    this.tokenValue = newToken
  })
},
beforeUnmount() {
  this.$root.$off('token-updated')
}

4. 初始化时读取 localStorage 值

不管用哪种方案，都要在组件初始化时从 localStorage 读取初始值，避免页面加载时数据为空：

data() {
  return {
    tokenValue: localStorage.getItem('Num1') || ''
  }
}

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