如何观察/订阅 Aurelia Store 中的状态变化？答案

【问题标题】：How to observe/subscribe to changes in the state in Aurelia Store?如何观察/订阅 Aurelia Store 中的状态变化？
【发布时间】：2018-07-12 16:01:59
【问题描述】：

我的 Aurelia Store 状态有一个属性 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);

第一次，我的订阅将起作用，控制台将记录“发生了一些变化！”因为 state 是同一个对象，但是之后就不行了。

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

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

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

对于上下文，我想在每次selectedOption 属性更改时触发服务器调用。

我可以做些什么来接收来自该州的财产的所有更新？

【问题讨论】：

您应该订阅商店本身的change 作为@connectTo - link to store api 的一部分
@avrahamcool 我已经在课堂上使用了@connectTo() 装饰器。我不想订阅商店中的任何更改，因为我只关心我的一个属性 selectedOption 是否更改。

标签： aurelia aurelia-store

【解决方案1】：

这里的事情是 Store 暴露的 state observable 是一个 RxJS 流。因此，随着 connectTo 的新“多选择器”功能的出现，您可以创建两个绑定。通过实现一个名为selectorKeyChanged 的钩子，在您的示例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 等。

在updated docs 中了解更多关于多重选择器的信息。

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

【讨论】：