Vue Component, назначить вычисляемое свойство для данных

Question

Я пытаюсь установить для данных компонента значение вычисляемого свойства, так как это выбирает некоторые данные localStorage и немного манипулирует ими.

Затем я бы, как только компонент был смонтирован, прослушал изменения в localStorage, и если мой ключ обновился, тогда извлеките это значение снова, запустите его через мое вычисленное свойство и передайте его обратно в представление.

Однако я получаю следующую ошибку:

ReferenceError: ids is not defined
    at a.render (vue.js:4)
    at a.e._render (vue:6)
    at a.r (vue:6)
    at un.get (vue:6)
    at new un (vue:6)
    at vue:6
    at a.bn.$mount (vue:6)
    at a.bn.$mount (vue:6)
    at init (vue:6)
    at vue:6

Это мой компонент:

Vue.component('favourites-button', {
    render() {
        return this.$scopedSlots.default({
            count: this.ids.length
        });
    },
    data: function() {
        return {
            ids: this.getFavourites()
        }
    },
    mounted() {
        const self = this;
        Event.listen('favourites-updated', function (event) {
            console.log('updated external');
        });
        window.addEventListener('storage', function (e) {
            if (e.key === 'favourites') {
                console.log('updated');
                self.ids = self.getFavourites();
            }
        });
    },
    methods: {
        getFavourites: function() {
            let favourites = localStorage.getItem('favourites');
            return favourites.split(',').filter(id => !!id);
        }
    }
});

Редактировать:

Обновленомой код, но та же ошибка появляется при срабатывании события storage.

Редактировать 2:

Оказывается, мой шаблон ожидал toggle в моей области видимости, но я удалил это из своего $scopedSlots.

Answer 1

Вы можете использовать для этого вычисленные свойства , но вам придется определить геттер и сеттер.

computed: {
  fullName: {
    // getter
    get: function () {
      return localStorage.getItem('favourites')
    },
    // setter
    set: function (newValue) {
      localStorage.setItem('favourites', newValue)
    }
  }
}

Намного чище, чем при использовании смонтированного обратного вызова, настройки данныха затем следите за изменениями.

Answer 2

Вычисляемые свойства работают с данными / реквизитами, поэтому вы не можете использовать их в самих данных.

Вместо этого просто установите значение по умолчанию ключа данных на то, что находится в локальном хранилище:

data: function () {
    return {
        ids: function() {
            let favourites = localStorage.getItem('favourites');
            return favourites.split(',').filter(id => !!id);
        }
    };
}