如何解决 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.

组件1：

哈佛商学院：

<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;
}

组件2：

哈佛商学院：

{{#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 引起了这个问题。我发现从相关示例中删除它们并查看是否不再抛出这些弃用是一种更简单的方法。

组件1：

哈佛商学院：

<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'),
});

组件2：

哈佛商学院：

{{#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）必须使用计算属性。