Aurelia的computedFrom与一个对象

Question

我有一个state具有属性的对象session,此属性可以是object或null.

我不想脏得检查isSessionActive()吸气剂,所以我想用computedFrom().但是,computerFrom()此对象更改时似乎不会触发,除非之前已更改undefined.

如果isSessionActive我的州商店没有专门的布尔属性,我可以这样做吗？

@autoinject
export class Home {
    firstName: string = "user";
    private state: State;

    constructor(private store: Store) {
       store.state.subscribe(
            response => this.state = response
       )
    }

    @computedFrom('state.activeSession')
    get isSessionActive() {
        return this.state.activeSession !== null;
    }
}

Answer 1

我可以看到您已经解决了您的问题，但这只是一种解决方法而不是实际的解决方案。因此，我想对您为什么会遇到这种情况以及如何解决它做出一些解释。基本上，您的问题几乎是此处描述的同一问题的不同情况。

我已经在评论部分提供了详细的解释，因为有一个猜测答案，所以我将在这里重复一遍。

重要的代码如下：

private state: State;

// ...

@computedFrom('state.activeSession')

就像我已经在这里解释的那样，Aurelia 更改检测的工作方式是，当 Aurelia 参与观察某些值时，它会设置自定义 getter 和 setter 来代替相应的字段或属性。基本上，设置器所做的就是调用原始属性设置器（或设置原始支持字段），然后通知任何感兴趣的各方（即，绑定到该属性的任何内容）该值已更改。

如果这对您来说没有意义，没关系，重要的是每当您绑定到某物时，该东西必须在绑定设置之前就位。就像链接答案的评论部分中所解释的那样，如果您这样写：

private state: State;

这只是 TypeScript 的一个提示，它state在定义类上的语义是正确的。换句话说，由于您没有将其设置为任何内容，因此它完全被排除在转译的 JavaScript 代码之外state- 它所做的只是使TypeScript 中的 valid使用变得有效。

例如，如果您这样做：

class A {
  x: number;
}

那么生成的 JavaScript 将类似于：

function A() {
}

请注意，没有this.x！但是，如果你这样写：

class B {
  x: number = undefined; // or null, or whatever you like
}

那么生成的 JavaScript 将是：

function B() {
  this.x = undefined;
}

两者之间的区别在于，在第一种情况下，没有要绑定的属性。因此，Aurelia 无法订阅它，因为它无法知道该属性何时（在 JavaScript 中）开始存在于对象上。这里需要注意的是，如果您像这样检查控制台中的值：

var a = new A();
var b = new B();
console.log(a.x); // undefined
console.log(b.x); // undefined

两者a.x和b.x似乎都是undefined。但它们是不同的：a.x是undefined因为它不存在，a而b.x是undefined因为它被显式分配了一个值 undefined- 所以它确实存在，只是碰巧有一个值undefined。后一种情况确实使Aurelia 能够在属性上设置其自定义逻辑，而前一种情况则不然。

总之，要使您的计算属性起作用，您需要做的就是为计算中涉及的所有属性undefined分配一个默认值（例如，null） 。无论如何，这是一个很好的做法。

Answer 2

我最终只做了以下事情：

isSessionActive: boolean = false;

constructor(private store: Store) {
    store.state.subscribe(
        response => { 
            this.state = response;
            this.isSessionActive = response.activeSession !== null;
        }
    )
}