如何在 Vue js 中使 localStorage 中的数据响应式

Question

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

我使用数据作为多个组件的 props，当我从组件写入

localStorage

时，我使用

forceUpdate

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

updateData

。

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

...............
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))
      }
    }
  }
});

最初的问题是我尝试使用计算所得的 getter 中的 

localStorage.getItem()

，但 Vue 不知道本地存储中发生了什么，并且当有其他选项时专注于使其具有反应性是愚蠢的。技巧是首先从本地存储获取，并在发生变化时不断更新本地存储值，但保持 Vue 知道的反应值。

Answer 2

我最初将 localStorage 中的数据加载到 Parent 数据中名为 myData 的值。

• 然后我在 props 中使用 myData 通过 props 填充组件中的数据。
• 当我想添加新的或编辑数据时，
• 我提取了本地存储的新副本，
  • 添加到它并再次保存，
  • 同时，我将 localStorage 的更新副本发送到父级中的 myData，
  • 又通过 props 更新了子组件中的所有数据。
这效果很好，使所有数据都从一个数据源实时更新。

Answer 3

我的 localstorage.set 在更新数据库后执行此操作：

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

在 Mounted() 中，我有一个监听器，它更新forceRedraw，它 - 等待它 - 强制重绘。 

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

Answer 4

watch

来保持本地存储与

ref

同步：

const token = ref(localStorage.getItem('token') || undefined)
watch(token, newValue => {
    if (!newValue) localStorage.removeItem('token')
    else localStorage.setItem('token', newValue)
})