如何解决Ember弃用问题：“使用defineProperty定义计算属性”

Question

当尝试将Ember应用程序更新到Ember 3.6（当前在3.4 LTS上）时，我遇到了以下不赞成使用的几种情况。

https://deprecations-app-prod.herokuapp.com/deprecations/v3.x/#toc_ember-meta-descriptor-on-object

  

使用defineProperty定义计算的属性

     

直到：3.5.0

     

id：ember-meta.descriptor-on-object

尽管不常见，但可以直接将计算的属性分配给对象，并可以从例如Ember.get中隐式地计算它们。作为支持ES5 getter计算属性的一部分，不建议直接分配计算属性。您应该将这些分配替换为对defineProperty的调用。

这些弃用在浏览器控制台中显示为：

  

DEPRECATION: [DEPRECATED] computed property 'session' was not set on object '<app@component:component1::ember439>' via 'defineProperty' [deprecation id: ember-meta.descriptor-on-object] See https://emberjs.com/deprecations/v3.x#toc_use-defineProperty-to-define-computed-properties for more details.

     

DEPRECATION: [DEPRECATED] computed property 'gStories' was not set on object '<app@component:component2::ember427>' via 'defineProperty' [deprecation id: ember-meta.descriptor-on-object] See https://emberjs.com/deprecations/v3.x#toc_use-defineProperty-to-define-computed-properties for more details.

component1：

HBS：

<div>
  {{#if session.isAuthenticated}}
    <h2>Signed in</h2>
  {{else}}
    <h2>Sign Up</h2>
    {{signup-dialog}}
  {{/if}}
</div>

JS：

会话服务来自ember-simple-auth： http://ember-simple-auth.com/api/classes/SessionService.html

import Component from '@ember/component';
import { service } from 'ember-decorators/service';

export default class Component1 extends Component {
  @service('session') session;
}

component2：

HBS：

{{#if gStories}}
  <h2>
    Stories
  </h2>

  {{#each gStories as |story|}}
    {{story-component story=story}}
  {{/each}}
{{/if}}

JS：

import Component from '@ember/component';
import { computed } from 'ember-decorators/object';
import { argument } from '@ember-decorators/argument';

export default class Component2 extends Component {
  constructor() {
    super(...arguments);
  }

  @argument
  stories = null;

  @computed('stories')
  get gStories() {
    let stories = this.get('stories');
    let gStories = [];
    stories.forEach((story) => {
      "use strict";

      if (story.get('type') === 'g') {
        gStories.pushObject(story);
      }
    });

    return gStories;
  }
}

我希望有人可以向我展示如何解决上述两种情况，以便我可以清理应用程序的其余部分。也许有一种更好的编码方法，我应该使用它作为弃用状态“尽管不常见”。

有关此弃用的任何其他背景信息，将不胜感激。

谢谢！

---

更新：

提醒我注意，可能是@ ember-decorators导致了此问题。我发现将它们从相关示例中删除并查看是否不再抛出这些弃用项是一条更简单的途径。

component1：

HBS：

<div>
  {{#if session.isAuthenticated}}
    <h2>Signed in</h2>
  {{else}}
    <h2>Sign Up</h2>
    {{signup-dialog}}
  {{/if}}
</div>

JS：

会话服务来自ember-simple-auth： http://ember-simple-auth.com/api/classes/SessionService.html

import Component from '@ember/component';
import {inject as service} from '@ember/service';

export default Component.extend({
  session: service('session'),
});

component2：

HBS：

{{#if gStories}}
  <h2>
    Stories
  </h2>

  {{#each gStories as |story|}}
    {{story-component story=story}}
  {{/each}}
{{/if}}

JS：

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  stories: null,

  gStories: computed('stories', function() {
    let stories = this.get('stories');
    let gStories = [];
    stories.forEach((story) => {
      "use strict";

      if (story.get('type') === 'g') {
        gStories.pushObject(story);
      }
    });

    return gStories;
  })
});

好消息是解决了component2的弃用问题。坏消息是它没有针对component1。

会话的弃用仍然存在：

  

DEPRECATION: [DEPRECATED] computed property 'session' was not set on object '<app@component:component1::ember439>' via 'defineProperty' [deprecation id: ember-meta.descriptor-on-object] See https://emberjs.com/deprecations/v3.x#toc_use-defineProperty-to-define-computed-properties for more details.

有想法吗？

Answer 1

@ember-decorators是罪魁祸首，因为删除对@ember-decorators的引用将清除弃用警告。 @ember-decorators的基础实现（至少是较旧的版本-在这种情况下为1.3.4）必须使用计算属性。