Javascript 如何在Vue js中使本地存储中的数据成为被动的

我在Vue js项目中使用localStorage作为数据源。我能读能写，但找不到一种反应性地使用它的方法。我需要刷新以查看我所做的任何更改

我将数据用作多个组件的道具，当我从组件写入

localStorage

时，我会使用

updateDate

方法在主App.vue文件上触发

forceUpdate

强制更新在此不起作用。有什么办法不用刷新页面就可以做到这一点吗

...............
data: function () {
        return {
            dataHasLoaded: false,
            myData: '',
        }
    },
mounted() {
        const localData = JSON.parse(localStorage.getItem('myData'));
        const dataLength = Object.keys(localData).length > 0;
        this.dataHasLoaded =  dataLength;
        this.myData = localData;
    },
methods: {
    updateData(checkData) {
        this.$forceUpdate();
        console.log('forceUpdate on App.vue')
    },
},
...............

---

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

• 我最初将localStorage中的数据加载到父数据中名为myData的值
• 然后我使用props中的myData通过props填充组件中的数据
• 当我想添加新数据或编辑数据时，
  • 我找到了本地存储的新副本
  • 添加并再次保存
  • 同时，我将本地存储的更新副本发送到父级中的myData
  • 进而通过道具更新子组件中的所有数据

---

这很好，可以从一个数据源实时更新所有数据。

以下是我解决此问题的方法。本地存储不是被动的，但它非常适合在刷新过程中保持状态

反应性最好的是常规的旧数据值，可以用本地存储值初始化。使用数据值和本地存储的组合

假设我试图查看保存在

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不知道本地存储中发生了什么，当有其他选项时，专注于使其响应是愚蠢的。诀窍是最初从本地存储获取，并在发生更改时不断更新本地存储值，但保持Vue知道的反应性值。

this.clientFirstName=

假设您的

数据中有
clientFirstName:'
：
返回{clientFirstName:''，dataHasLoaded:false，myData:''}
是的，很抱歉我忘了忽略它。我现在就编辑。谢谢您不需要$forceUpdate。也许可以告诉我们如何保存数据？如果您在javascript控制台（在应用程序页面上）中键入
localStorage.getItem（'myData'）
，是否会得到输出（除null之外）？您好，是的，一切正常，我可以读取和写入localStorage，但如果不刷新页面，我无法在屏幕上看到更改。我需要在更新数据时强制Vue重新读取数据，以查看屏幕上最新的更改。我正试图重现您的问题，我可以看出您需要一些东西来检测localStorage更改e（发送一些事件、使用事件总线、使用vuex设置状态等），但我看不到vue方面存在任何反应性问题。