Question

我正在将阵列保存到本地存储中

并像这样在数组中添加/删除。

我希望在本地存储中将新项添加到数组中时以及在组件中更新数组的计数

我正在使用计算所得的属性：

 numOfCodes: {
      // getter
      get: function() {
        let storageItems = localStorage.getItem("items");
        if (storageItems) {
          var items = JSON.parse(storageItems);
          return items.length;
        }
        return 0;
      }
    }

计数没有按预期变化。它保持不变。

我尝试使用vuex，但是仍然有问题。目标是让该值对本地存储变化做出反应

Answer 1

localStorage不共享Vue的反应系统。这整个过程由Vue本身处理。另请参见here。我认为您应该可以通过强制Vue使用forceUpdate更新其所有组件来手动触发重新渲染。但是，请记住，每当您更新localStorage或希望对其进行更新时，都必须触发重新渲染。

Answer 2

我认为解决方案是使用vuex，我在下面模拟了一个示例：

在您的组件上：

computed: {
    ...mapGetters({
        itemsCount: 'mockLocalStorage/itemsCount'
    })
},

created() {
    this.setItems(...);
},

methods: {
   ...mapActions({
       setItems: 'mockLocalStorage/setItems'
   })
}

在vuex中：

state = {
    items: []
};

getters = {
    itemsCount: state => state.items.length
};

actions: {
    setItems({ commit }, items) {
        localStorage.setItem('items', items);
        commit('setItems', items);
    }
};

this.itemsCount随后将在您的组件中处于反应状态，并且您可以创建一些其他操作来添加和删除单个项目。

Answer 3

使用watcher。

props: ['storageItems', 'itemsLength'],
watch: {
    storageItems: function(newVal, oldVal) {
        this.storageItems = newVal
        this.itemsLength = newVal.length
    }
}

计算属性响应本地存储更改

3 个答案: