Может ли магазин VueX также отправлять события компонентам?

Question

У меня есть следующее дерево компонентов:

App
  List
  ItemDetails
    Widget1
    ...

• компонент List имеет форму фильтров, которые применяются при нажатии кнопки
• Widget1 имеет кнопкукоторый применяет другой фильтр (id) к списку, применяя тот, который удаляет фильтры из формы фильтра и наоборот
• список также обновляется в режиме реального времени посредством опроса (позже будет через WebSockets), поэтомуЯ должен отделить v-model полей фильтра в List и фактически примененных фильтров (они есть в магазине)

В настоящее время я поместил следующее состояние в хранилище VueX:

state: {
    filters: {
        // these come from the List's filter panel
        result: '',
        name: '',
        date: '',
        // this one comes from Widget1
        id: '',
    },
    pagination: {
        perPage: 10,
        page: 0,
        total: 0,
    },
    items: [],

    selectedItem: null,
},

и оба фильтра из List и из кнопки в Widget1 применяются путем отправки в магазин следующего действия:

applyFilters ({ state, commit, dispatch }, filters) {
    if(filters.id) {
        for(let filterName in state.filters)
            if(filterName !== 'id')
                filters[filterName] = '';
    } else {
        filters.id = '';
    }
    commit('setFilters', filters);
    commit('setPage', 0);
    dispatch('loadExaminations');
},

Но вот проблема:компонент List имеет свою модель полей фильтра (при нажатии кнопки они собираются и отправляется applyFilters).Это работает хорошо, за исключением случаев, когда применяется фильтр id (из Widget1), поля фильтра в компоненте List не очищаются.

Один очевидный вариант для обработки этого - переместить модель этих полей фильтра вв магазине тоже.Это выглядит не очень хорошо, поскольку для каждого поля (которое использует v-model) мне нужно создать computed (в компоненте List) и написать установщик и получатель из хранилища.Кажется, лучше отправлять событие с applyFilters на List со словами "очистить поля фильтра", но я не уверен, что VueX сможет это сделать. Возможно ли это?Или мне следует придерживаться плана «перенести модель полей фильтра в магазин»?Или вы знаете хорошую альтернативу? Мне известна концепция шины событий , но в ней используется экземпляр Vue, который, я думаю, не следует использовать в магазине.

Answer 1

Вы можете прослушать действия vuex, используя subscribeAction .

// List.vue
mounted() {
    this.$store.subscribeAction({
      before: (action, state) => {
        if (action.type === "applyFilters" && action.payload.id) {
          this.emptyComponentFields();
        }
      },
      after: (action, state) => {}
    });
  }

CodeSandbox .