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

Posted 2023-02-22

【中文标题】如何在 Vue js 中使 localStorage 中的数据具有反应性

【英文标题】：How to make data from localStorage reactive in Vue js

【发布时间】：2018-12-03 12:50:23

【问题描述】：

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

【问题讨论】：

this.clientFirstName = 假设您在data 的某处有一个clientFirstName: ''：return clientFirstName: '', dataHasLoaded: false, myData: ''

是的，对不起，我忘记了。我现在编辑。谢谢

这里不需要 $forceUpdate。也许向我们展示您如何保存数据？如果您在 javascript 控制台（在应用程序页面上）输入 localStorage.getItem('myData')，您会得到输出（不是 null）吗？

嗨，是的，一切正常，我可以读取和写入 localStorage，但如果不刷新页面，我就看不到屏幕上的更改。当我更新数据以查看屏幕上的最新更改时，我需要强制 Vue 重新读取数据。

jsfiddle.net/ippi/fd35but8/5 我正在尝试重现您的问题，我可以看到您需要一些东西来检测 localStorage 更改（发送一些事件，使用事件总线，使用 vuex 设置状态等） ，但我从 vue 方面看不到任何反应性问题。

【参考方案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 知道的响应值。

【参考方案2】：

对于面临同样困境的任何人，我无法按照我想要的方式解决它，但我找到了解决它的方法。

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

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