我是这样解决这个问题的：本地存储不是被动的，但是它非常适合在刷新时保持状态。

• 最 * 好的React是常规的旧数据值，可以用localStorage值初始化。使用数据值和本地存储的组合。

假设我试图查看我保存在localStorage中的令牌的更新，它可能如下所示：

const thing = new Vue({
  data(){
    return {
      tokenValue: localStorage.getItem('id_token') || '',
      userValue: JSON.parse(localStorage.getItem('user')) || {},
    };
  },
  computed: {
    token: {
      get: function() {
        return this.tokenValue;
      },
      set: function(id_token) {
        this.tokenValue = id_token;
        localStorage.setItem('id_token', id_token)
      }
    },
    user: {
      get: function() {
        return this.userValue;
      },
      set: function(user) {
        this.userValue = user;
        localStorage.setItem('user', JSON.stringify(user))
      }
    }
  }
});

最初的问题是我试图使用计算getter中的localStorage.getItem()，但Vue不知道本地存储中发生了什么，当有其他选项时，专注于使其React是愚蠢的。诀窍是最初从本地存储中获取，并在发生变化时不断更新本地存储值，但保持一个Vue知道的React值。

对于任何一个面临同样困境的人来说，我不能用我想要的方式解决它，但我找到了一种方法。

• 我最初将localStorage中的数据加载到Parent's Data中名为myData的值。
• 然后我在props中使用myData，通过props填充组件中的数据。
• 当我想要添加新数据或编辑数据时，
• 我调出了本地存储的一份新拷贝
• 添加到其中并再次保存，
• 同时我将localStorage的更新副本发送到父文件中的myData，
• 其又经由 prop 更新子组件中的所有数据。

这样做效果很好，可以从一个数据源真实的更新所有数据。

由于本地存储中的项目可能会被当前可见的vue模板之外的其他东西更新，我希望更新函数发出一个变化，vue可以对此做出React。
我的localstorage.set在更新数据库后会执行以下操作：

window.dispatchEvent(new CustomEvent('storage-changed', {
        detail: {
            action: 'set',
            key: key,
            content: content
        }
    }));

在mounted（）中，我有一个监听器，它更新forceRedraw，等等，它强制重绘。

window.addEventListener('storage-changed', (data) => {
        this.forceRedraw++;
        ...