1

我有一个selectedOption关于我的 Aurelia 商店状态的属性，可以通过操作进行更改。我想观察/订阅状态上此属性的任何更改。我的问题是订阅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!");
}

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

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

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

4

1 回答 1

2

这里的问题是 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等）时尝试其他条件，而不是尝试其他条件。

在更新的文档中阅读有关多选择器的更多信息。

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

于 2018-07-26T09:29:35.560 回答