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

计算属性适用于数据/道具，因此您不能在数据本身中使用它们。

相反，只需将数据密钥的默认值设置为本地存储中的值即可

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

Answer 2

为此can use computed properties，但您必须定义一个getter和setter。

customToJSON: function () {
 return _.omit(this, ['token'])
},

比使用挂载的回调，设置数据然后监视更改更干净的imo。

Vue组件，将计算的属性分配给数据

2 个答案: