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

【问题标题】：Vue Component, assign computed property to dataVue组件，将计算属性分配给数据
【发布时间】：2019-07-14 02:48:08
【问题描述】：

我正在尝试将组件的数据设置为计算属性值，因为这会获取一些 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 change 事件被触发时得到了同样的错误。

编辑 2：

原来我的模板在我的范围内期待toggle，但我从$scopedSlots 中删除了它。

【问题讨论】：

您在回调中使用了this，但它没有正确的上下文。
废话，完全忘记了！
更新了我的代码，仍然有同样的问题，更新帖子
即使进行了更改，您也遇到了完全相同的错误？
@SamuelVaillant 查看更新后的帖子

标签： javascript vue.js local-storage computed-properties

【解决方案1】：

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

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

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

【讨论】：

本地存储什么时候更新，这个会怎么更新？我需要分配一个事件监听器。
本地存储是否在 vue 的“外部”更新？例如通过一些外部脚本？
不，这一切都在 Vue 和它的组件中
那就不用关注storage事件了！

【解决方案2】：

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

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

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

【讨论】：