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

Posted 2023-02-23

【中文标题】Vue组件，将计算属性分配给数据

【英文标题】：Vue Component, assign computed property to data

【发布时间】：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 查看更新后的帖子

【参考方案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);
        
    ;