Question

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

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

强制更新在这里不起作用。有什么想法可以完成而无需刷新页面？

...............
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()，但是Vue只是不知道本地存储中发生了什么，而在有其他选择时专注于使其具有响应性是很愚蠢的。诀窍是首先从本地存储获取，并在发生更改时不断更新您的本地存储值，但保持Vue知道的被动值。

Answer 2

对于面临同样困境的任何人，我都无法以自己想要的方式解决它，但我找到了解决之道。

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

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

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

2 个答案: