ember.js - 如何解决 Ember 弃用 : "Use defineProperty to define computed properties"

Question

在尝试将 Ember 应用程序更新到 Ember 3.6(当前为 3.4 LTS)时，我遇到了以下弃用的多个实例。

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

Use defineProperty to define computed properties

until: 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:

session 服务来自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:

session 服务来自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 没有。

session 弃用仍然存在:

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