Вычисленная собственность реагирует на изменение местного хранения - PullRequest
Новая
       16

Вычисленная собственность реагирует на изменение местного хранения

0 голосов
/ 25 июня 2019

Я сохраняю массив в локальном хранилище

и добавление / удаление из массива, как.

Я хочу, чтобы счетчик массива обновлялся в компоненте по мере добавления новых элементов в массив в localstorage

Я использую вычисляемое свойство: 

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

Количество не меняется, как ожидалось. это остается тем же самым.

Я пытался использовать vuex, но проблема все еще есть. цель заключается в том, чтобы значение реагировало на изменение местного хранилища

Ответы [ 3 ]

0 голосов
/ 25 июня 2019

Я думаю, что решением этой проблемы будет использование 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 будет реагировать на ваш компонент, и вы сможете создать еще несколько действий для добавления и удаления отдельных элементов.

0 голосов
/ 25 июня 2019

Используйте наблюдателя . 

props: ['storageItems', 'itemsLength'],
watch: {
    storageItems: function(newVal, oldVal) {
        this.storageItems = newVal
        this.itemsLength = newVal.length
    }
}
0 голосов
/ 25 июня 2019

LocalStorage не разделяет систему реактивности Vue. Весь этот процесс обрабатывается самой Vue. Смотрите также здесь . Я думаю, что вы должны иметь возможность вручную запустить повторный рендеринг, заставив Vue обновить все его компоненты, используя forceUpdate . Однако имейте в виду, что вам придется запускать повторный рендеринг всякий раз, когда вы обновляете localStorage или ожидаете, что он будет обновлен.

...