Подписка мутации Vuex запускается несколько раз - PullRequest
Новая
       32

Подписка мутации Vuex запускается несколько раз

1 голос
/ 05 апреля 2019

Я использую vue CLI и создал несколько компонентов

app.vue 

import home_tpl from './home.vue';

new vue({
    el : '#app',
    components : { home_tpl },
    created(){
        this.$store.subscribe((mutation) => {
            switch(mutation.type){
                case 'listing':
                    alert();
                break;
        });
    }
})

, а затем у меня также есть прослушиватель home.vue

home.vue 

export default{
    created(){
        this.$store.subscribe((mutation) => {
            switch(mutation.type){
                case 'listing':
                    alert();
                break;
        });
    }
}

проблема в том, что когда я запускаю this.$store.commit('listing',1); этот this.$store.subscribe((mutation) => { триггер дважды, что является ожидаемым поведением, так как я слушаю событие дважды из другого файла, есть ли способ заставить его срабатыватьтолько один раз на компонент?причина, по которой я называю слушателя мутаций home.vue, заключается в том, что есть событие, которое я хочу запустить только для этого компонента.

есть идеи, помогите, пожалуйста?

1 Ответ

0 голосов
/ 05 апреля 2019

Вы пример кода слушаете listing изменения для app.vue и home.vue, но, судя по вашим сообщениям, они заинтересованы в различного рода изменениях?

Как прокомментировано, watch должен быть лучшим подходом, если вас интересуют только несколько изменений, а не все изменения магазина. Что-то вроде: 


// home.vue
new vue({
    el : '#app',
    components : { home_tpl },
    created(){
        this.$store.watch((state, getters) => state.stateHomeIsInterested, (newVal, oldVal) => {
            alert()
        })
    }
})

// app.vue
export default{
    created(){
        this.$store.watch((state, getters) => state.stateAppIsInterested, (newVal, oldVal) => {
            alert()
        })
    }
}

Разница:

  • обратный вызов subscribe будет вызываться всякий раз, когда в хранилище происходит мутация (в вашем случае это может привести к потере некоторых ненужных вызовов обратного вызова). Метод обратного вызова получает мутацию и обновленное состояние в качестве аргументов
  • watch будет реагировать только на изменения возвращаемого значения получателя, определенного в его первом аргументе, и обратный вызов получает новое значение и старое значение в качестве аргументов. При необходимости вы можете просматривать несколько состояний.
...