Question

说我有一个商店，其中有一个组织列表，用户可以“选择”组织，然后将其存储在“过滤器”数组中。

export class OrganizationStore extends ArrayStore {
    //organizations = new Map();

    constructor( ...args) {
        super(args);
        this.organizations = new Map();
        this.filter = [];
        this.getter_url = '/organization/get-organizations';
    }

    async getData() {
        const full_url = new URL(this.getter_url);
        const options = {};
        options.method = 'GET';
        options.credentials = process.env.NODE_ENV === 'production' ? 'same-origin' : 'include';

        const response = await fetch(full_url, options);
        if (response.ok) {
            const d = await response.json();
            this.buildStore(d);
        }

    }

    buildStore(values) {
        this.organizations.clear();
        for (const {id, name} of values) {
            this.organizations.set(id, new Organization(id, name));
        }
    }

    get count() {
        return this.organizations.size;
    }
}

decorate(OrganizationStore, {
    organizations: observable,
    filter: observable,
    count: computed,
});



export class Organization {
    constructor(id, name) {
        this.id = id;
        this.name = name;
    }
}

还存在另一家商店

export class UserStore extends ArrayStore {
    constructor(organizationStore, ...args) {
        super(args);
        this.users = [];
        this.getter_url = '/users/get-users';
        this.organizationStore = organizationStore;
    }

    async getData() {
        const full_url = new URL(this.getter_url);
        const options = {};
        options.method = 'GET';
        options.credentials = process.env.NODE_ENV === 'production' ? 'same-origin' : 'include';

        query = {filter: this.organizationStore.filter()};
        //how to make this line "observe" the original store

        Object.keys(query).forEach(key => full_url.searchParams.append(key, options.query[key]));


        const response = await fetch(full_url, options);
        if (response.ok) {
            const d = await response.json();
            this.buildStore(d);
        }


    }
}

现在（如何）可以使商店自动刷新自身（一旦organizationStore.filter[]更改后，让getData重新运行）？

Answer 1

我认为您可能正在寻找reactions。

反应-自动运行的一种变体，可以更精细地控制要跟踪的可观察对象。它具有两个功能，第一个功能（数据功能）被跟踪，并返回用作第二个功能（效果功能）的输入的数据。

export class UserStore extends ArrayStore {
    constructor(organizationStore, ...args) {
        super(args);
        this.users = [];
        this.getter_url = '/users/get-users';
        this.organizationStore = organizationStore;

        // Dispose of this when done with it
        const disposer = reaction(
            () => this.organizationStore.filter.length,
            () => this.getData()
        );
    }

    // ...
}

如果您想对事件进行更多控制，另一种选择是使用observe

const disposer = observe(this.organizationStore.filter, (change) => {
    // Change is an object with a couple properties that describe what has changed and how
});

但是我认为您的反应很好。

在mobX中，商店可以“监听”其他商店吗，并且只要其他商店发生变化，就可以执行查询？

1 个答案: