Question

我在一家商店有活动

export class EventStore {

    @observable
    events: Event[] = [];

    @action
    addEvent(event: Event) {
        this.events = [...this.events, event]
    };
};

我的活动如下：

export class Event{
   
   classType: string;
}

我想观察商店但仅特定商店 events

的classType属性的变化

例如：

我有一个classType为“ AddToCart”和“ Order”的事件，并且我只希望观察添加的“ Order”，它已从events中删除

我要使用import { observer } from "mobx-react"

问题：

在EventStore中有一些魔术可以做吗，或者我必须在我的组件中处理（如果有的话）？

我不完美的解决方案

与此同时，我正在做这样的事情：

  reaction(
            () => eventStore.lastEvent,
            event => {
                if (event.classType === "Order")
                    this.newEvent = { ...event }
            }
  )

Answer 1

您可以添加computed属性

    @computed
    get orderEvents() {
        // Add whatever filtering you want
        return this.events.filter(event => event.classType === 'Order')
    };

如果您需要传递参数，可以从computedFn mobx-utils：

    filteredEvents = computedFn(function (classType) {
        return this.events.filter(event => event.classType === classType)
    })

注意：请不要使用箭头功能，因为this会不正确。

https://github.com/mobxjs/mobx-utils#computedfn

https://mobx.js.org/refguide/computed-decorator.html#computeds-with-arguments

Mobx仅观察数组中的特定对象

问题：

我不完美的解决方案

1 个答案: