Ember.js Computed 属性 vs Observer vs didReceiveAttrs() 在组件中

Question

我在我的 ember.js 应用程序中创建了一个顶部导航栏并将其转换为一个组件，以便在用户登录后我可以有一个简单的 "Welcome {{currentUser.fullName}}" 介绍。还有一些其他原因导航栏将成为一个组件，但现在这是我正在努力使它正常工作的东西。我们还使用 ember-simple-auth 插件，我使用 session.isAuthenticated 值来实现这一点。

当然我有一个 'login' 路由，当用户登录时，他们会转换到 'index'。出于某种原因，似乎 session.isAuthenticated 值在转换到 'index' 期间不会立即被捕获。我不知道这是为什么，但那是另一个问题。

无论如何，我在这个应用程序中使用了很多组件，并且这些组件中的大多数从会话中获取它们的值并独立于路由查询商店，以便我可以在多个路由上使用这些组件。导航栏也不例外。现在我有以下工作代码：

export default Ember.Component.extend({
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    isAuthenticated: Ember.observer('session.isAuthenticated', function() {
        this.didReceiveAttrs();
    }),
    currentUserFullName: null,
    user: null,
    tagName: 'navbar-main',
    className: ['navbar', 'main'],
    didReceiveAttrs() {
        this._super(...arguments);

        if (this.get('session.isAuthenticated')) {
            this._setCurrentUser();
        }
    },
    _setCurrentUser() {
        this.get('currentUser').load().then(user => this.set('user', user));
    },
    onGetCurrentUser: Ember.observer('user', function() {
        this.getUser();
    }),
    getUser: function() {
        var user = this.get('user');

        if(user) {
            this.set('user', user);
            this.set('currentUserFullName', user.get('fullName'));
        } else {
            user = this.get('store').findRecord('user', 'me');
            this.set('user', user);
            this.set('currentUserFullName', user.get('fullName'));
        }
    }
});

我正在阅读的所有内容都建议只使用 didReceiveAttrs() 而不是观察者。此外，它还说计算属性通常是你想在观察者上使用的。但是，如果没有以下内容，我似乎无法工作：

isAuthenticated: Ember.observer('session.isAuthenticated', function() {
    this.didReceiveAttrs();
}),

如果我尝试将其转换为计算属性它似乎对属性更改没有任何作用，除非我在它已经转换为 [=42] 后刷新页面=] 路线。如果我尝试仅将 didReceiveAttrs() 方法与 this.get('session.isAuthenticated') 逻辑一起使用，则仍需要刷新页面。

所以我对如何使用 Ember.computed 和 didReceiveAttrs() 有什么不理解的？有人可以给我举个例子吗？或者告诉我一个更有效的方法来完成我想要完成的事情？

更新代码：

// app/pods/components/navbar-main/component.js
import Ember from 'ember';
import layout from './template'; 

export default Ember.Component.extend({
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    user: null,
    isAuthenticated: Ember.observer('session.isAuthenticated', function() {
        this.get('currentUser').load().then(user => this.set('user', user));
    }),
    currentUserFullName: Ember.computed.alias('user.fullName'),
    tagName: 'navbar-main',
    className: ['navbar', 'main'],
    didReceiveAttrs() {
        this._super(...arguments);

        if(this.get('session.isAuthenticated')) {
            this.isAuthenticated();
        }
    }
});

<!-- app/pods/components/navbar-main/template.hbs -->
{{#if session.isAuthenticated}}
    <div class="ui black user login label">
        <div class="ui grid">
            <div class="twelve wide column">
                <div class="detailed">{{currentUserFullName}}<br>Welcome</div>
            </div>
            <div class="four wide column" style="padding-top: 12px; margin-top: 0;">
                <img class="ui top aligned small avatar image" src="http://semantic-ui.com/images/avatar/small/christian.jpg">
                <!--<img class="ui top aligned tiny avatar image" src="{{currentUser.avatar}}">-->
            </div>
        </div>
    </div>
{{/if}}

更新 2（最终代码在@AdamCooper 和@kumkanillam 的帮助下）：

export default Ember.Component.extend({
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    user: null,
    isAuthenticated: Ember.on('init', Ember.observer('session.isAuthenticated', function() {
        this.get('currentUser').load().then(user => this.set('user', user));
    })),
    currentUserFullName: Ember.computed.alias('user.fullName'),
    tagName: 'navbar-main',
    className: ['navbar', 'main']
});

所以这是最少的代码量，仍然使用观察者和计算方法，但没有使用组件生命周期。所以我想有时仍然有必要使用观察者是我想出的。

Answer 1

作为一般规则，您希望尽可能避免使用观察器。 Steffan Penner 对观察者有一个 great video，我建议您观看以真正理解为什么它们对您的代码库有潜在危害。

在你的例子中，load() 函数是 returning 一个承诺，这不是你想要从计算的属性 return 得到的东西，所以你需要使用观察者在 isAuthenticated 上。我已经尽可能地简化了你的代码，但不能运行它，但希望你应该明白这个想法：

export default Ember.Component.extend({
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),

    user: null,

    authenticatedObserver: Ember.observer('session.isAuthenticated', function() {
        // Load the user, this will cause the currentUserFullName to be 
        // updated. We're using an observer here because load() returns
        // a promise 
        this.get('currentUser').load().then(user => this.set('user', user));
    }),

    // This computed property will be re-calculated whenever user is modified
    currentUserFullName: Ember.computed.alias('user.fullName')  
});

Answer 2

Ember会根据渲染场景依次调用组件生命周期钩子方法。

初始渲染 - init,didReceiveAttrs,willRender,didInsertElement,didRender
关于 Re-Rener - didUpdateAttrs、didReceiveAttrs、willUpdate、willRender、didRender
在组件销毁时 - willDestroyElement,willClearRender,didDestroyElement
（参考 - https://guides.emberjs.com/v2.7.0/components/the-component-lifecycle/）

我们不应该调用那些组件生命周期钩子方法。

我相信，您可以将 currentUser 特定代码完全隔离到 currentUser 服务，这样您就可以轻松地将它注入并用于所有组件。

export default Ember.Component.extend({
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    currentUserFullName: Ember.computed.alias('currentUser.currentUserFullName'),
    user: Ember.computed.alias('currentUser.user'),

    tagName: 'navbar-main',
    className: ['navbar', 'main'],    

});

通过观察 session.isAuthenticated 属性.

初始化 currentUser 及其详细信息

services\current-user.js

import Ember from 'ember';

export default Ember.Service.extend({
  session: Ember.inject.service(),
  currentUserFullName: null,
  user: null,

  loadCurrentUserDetails:Ember.observer('session.isAuthenticated', function(){
    //load async data and set user and currentUserFullName.
  })
});

Answer 3

这就是我最终得到的适合我的情况的方法：

export default Ember.Component.extend({
    layout,
    session: Ember.inject.service(),
    currentUser: Ember.inject.service(),
    user: null,
    isAuthenticated: Ember.on('init', Ember.observer('session.isAuthenticated', function() {
        this.get('currentUser').load().then(user => this.set('user', user));
    })),
    currentUserFullName: Ember.computed.alias('user.fullName'),
    tagName: 'navbar-main',
    className: ['navbar', 'main']
});

这结合了 Ember Freak's and Adam Cooper 对这个问题的回答。

Ember.js Computed 属性 vs Observer vs didReceiveAttrs() 在组件中

Ember.js Computed Property vs Observer vs didReceiveAttrs() in a Component

ember.js

ember-cli

observers

ember-components

computed-properties