我正在尝试将组件的数据设置为计算属性值，因为这会获取一些 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 中删除了。