ember.js - Ember 计算属性取决于未更新的服务属性

Question

在我的 Ember 2.8 应用程序中，我正在服务中建立 Websocket 连接。当用户登录时，连接 URL 会发生变化(然后将用户身份验证 token 作为查询参数包含在内)。

当前的用户服务很简单:

CurrentUserService = Ember.Service.extend(
  name: "current-user"

  user: null

  load: ->
    // Do some stuff
    @set("user", user)
 )

它完全按预期工作，我用它在页面上显示当前用户的用户名(除其他外)。

在 Websocket 服务中，我所做的只是根据 currentUser.user 创建一个计算属性，用于建立连接(取决于用户是否登录):

ActionCableService = Ember.Service.extend(
  name: "action-cable"

  cable: service()
  currentUser: service()

  testObs: Ember.observer("currentUser", ->
    console.log "currentUser changed, #{ @get("currentUser.user") }"
  )

  consumer: Ember.computed("currentUser.user", ->
     consumerUrl = "ws://localhost:10000/cable"

    if @get("currentUser").user?
      consumerUrl += "?token=#{ @get("currentUser.user.authToken") }"

    console.log(consumerUrl)
    return @get("cable").createConsumer(consumerUrl)
  ) 
)

问题是，消费者属性永远不会更新。它在页面加载时设置一次，并且当 currentUser 服务的用户属性更改时， consumer没有更新，我的测试观察者也没有。

当我刷新页面时，有时会使用登录的consumerUrl，有时则不会。
我猜有时 session 恢复首先发生，有时 Action 电缆服务首先发生。

当 Action 电缆服务首先加载时，我期望发生的是:

Action 电缆服务已加载，当前未设置用户，连接到公共(public) websocket

处理从 session 数据触发恢复用户的逻辑，设置 currentUser.user (发生这种情况，我可以在我的页面上看到用户名)

consumer计算属性通知 currentUser.user更改并连接到私有(private) consumerUrl(不会发生)

我可以很容易地以不依赖于计算属性的方式解决这个问题，但我想知道这里出了什么问题。

Answer 1

Computed properties, by default, observe any changes made to the properties they depend on, and are dynamically updated when they're called.

除非您正在调用或调用该计算属性，否则它不会执行您想要的代码。

Observers ，另一方面，当他们正在观察的属性发生变化时，无需调用即可使用react。但是它们经常被过度使用，并且由于它们的同步特性很容易引入错误。

您可以将观察者和计算属性重构为直接调用的辅助函数。这也使它们更容易进行单元测试。

在您的 Controller ，您可以处理登录的初始操作，如下所示:

currentUser: Ember.inject.service(),

actions: {
  login() {
    this.auth({ username: 'Mary' });
  },
},

auth(data) {
  // Send data to server for authentication...

  // ...upon response, handle the following within the promise's `then`
  // method, failures caught within `catch`, etc. But for purposes of 
  // demonstration, just mocking this for now...
  const response = { username: 'Mary', authToken: 'xyz', };
  this.get('currentUser').setConsumer(response);
},

当前用户服务然后可以设置它的属性，并在 action-cable 上调用辅助函数服务:

actionCable: Ember.inject.service(),

authToken: null,
username: null,

setConsumer(response) {
  this.set('authToken', response.authToken);
  this.set('username', response.username);
  this.get('actionCable').setConsumer();
},

有线电视服务从 currentService 读取属性, 设置 consumerUrl ，并调用 电缆创建消费者的服务:

cable: Ember.inject.service(),
currentUser: Ember.inject.service(),

setConsumer() {
  var consumerUrl = "ws://localhost:10000/cable";

  if (this.get("currentUser.username") !== null) {
    consumerUrl += "?token=" + (this.get("currentUser.authToken"));
  }

  console.log("ACTION CABLE SERVICE, Consumer URL: ", consumerUrl);
  this.get("cable").createConsumer(consumerUrl);
}

我创建了一个 Ember Twiddle展示。