如何观察/订阅Aurelia中的状态更改？

Question

我在Aurelia状态下有一个属性selectedOption，它可以通过操作进行更改。我希望观察/订阅状态上对此属性的任何更改。我的问题是，BindingEngine中的订阅不起作用，因为每次更改状态时，都会创建状态的新副本，因此订阅不再起作用。

以下是我的例子：

import { Disposable, BindingEngine, autoinject } from "aurelia-framework";
import { connectTo, dispatchify } from "aurelia-store";

@autoinject()
@connectTo()
export class Holiday {
    subscription: Disposable;
    state: any;

    constructor(private bindingEngine: BindingEngine) {
    }

    async updateState()
    {
        await dispatchify(changeSelectedOption)();
    }

    attached() {
        this.subscription = this.bindingEngine
            .propertyObserver(this.state, 'selectedOption')
            .subscribe((newValue, oldValue) => {
                console.log("something has changed!")
            });
    }
}

export class State {
    selectedOption: number = 0;
}

export const changeSelectedOption = (state: State) => {
    let updatedState = { ...state };
    updatedState.selectedOption++;
    return updatedState;
}

store.registerAction("changeSelectedOption", changeSelectedOption);

第一次，我的订阅将工作，控制台将记录“什么东西变了！”因为状态是相同的对象，但是之后就不能工作了。

我可以使用的另一个解决方案是拥有这样的计算属性：

@computedFrom("state.selectedOption")
get selectedOptionChanged()
{
    return console.log("something has changed!");
}

这是一个黑客，并且这个计算永远不会被触发，因为它没有绑定到HTML中的任何东西。

对于上下文，每当selectedOption属性更改时，我都希望触发一个服务器调用。

如何从状态上的属性接收所有更新？

Answer 1

这里的问题是，商店公开的状态是一个RxJS流。因此，随着connectTo新的“多选择器”特性的出现，您可以创建两个绑定。通过实现一个名为selectorKey Changed的钩子，在您的示例selectedOptionChanged中，它将在所述属性的每个更改中被调用。

@connectTo({
  selector: {
    state: (store) => store.state, // the complete state if you need
    selectedOption: (store) => store.state.pluck("selectedOption")
  }
})

class MyVM {
  ...
  selectedOptionChanged(newState, oldState) {
    // notification about new state
  }
}

与store.state.pluck("selectedOption")不同，您还可以在通知更改(如添加distinctUntilChanged等)时使用附加条件。

在更新的文档中阅读更多关于多选择器的内容。

或者，如果您不想使用connectTo装饰器，只需使用state属性并创建另一个订阅