如何在 Vue js 中使来自 localStorage 的数据具有反应性

Question

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

我使用数据作为多个组件的道具，当我localStorage从组件写入时，我forceUpdate使用该updateDate方法在主 App.vue 文件上触发 a 。

强制更新在这里不起作用。有什么想法可以在不刷新页面的情况下完成此任务？

...............
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')
    },
},
...............

Answer 1

这是我解决这个问题的方法。本地存储不是反应性的，但它非常适合跨刷新保持状态。

什么是在为伟大的反应是普通的旧数据值，可与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))
      }
    }
  }
});

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

Answer 2

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

• 我最初将 localStorage 中的数据加载到 Parent 数据中名为 myData 的值。
• 然后我在 props 中使用 myData 通过 props 填充组件中的数据。
• 当我想添加新数据或编辑数据时，
  • 我提取了 localStorage 的新副本，
  • 添加到它并再次保存，
  • 同时我将 localStorage 的更新副本发送到父级中的 myData，
  • 这又通过 props 更新了子组件中的所有数据。

这很有效，使得所有数据都从一个数据源实时更新。