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

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/props，因此您不能在数据本身中使用它们。

相反，只需将数据键的默认值设置为本地存储中的内容即可：

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

Answer 2

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

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

imo 比使用挂载的回调、设置数据然后观察变化要干净得多。

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

Vue Component, assign computed property to data

javascript

local-storage

vue.js

computed-properties

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

Vue Component, assign computed property to data

javascript

local-storage

vue.js

computed-properties

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