Вью.Установить фокус на входе компонента при изменении значения в хранилище Vuex

Question

Вот код, который у меня есть в моем компоненте:

//template
<v-select ref='ItemSearchSelect' :options="options"></v-select>
...
//script
created: function () {            
         this.$store.subscribe((setFocusSearch, state) => {
                if (setFocusSearch.type == 'setFocusSearch' && setFocusSearch.payload == true){
                    this.$refs.ItemSearchSelect.$refs.search.focus()
                    this.$store.commit('setFocusSearch',false)                    
                }
        })
    }, 

Это мутация моего магазина, которую можно вызвать из любого другого компонента:

setFocusSearch(state,val){
      state.focussearch = val;
    },

Иногда это работаетправильно, но в других случаях я вижу эту ошибку в консоли, и фокус не работает:

Uncaught TypeError: Cannot read property '$refs' of undefined
    at eval (ItemSearch.vue?d78c:38)
    at eval (vuex.esm.js?2f62:392)
    at Array.forEach (<anonymous>)
    at Store.commit (vuex.esm.js?2f62:392)
    at Store.boundCommit [as commit] (vuex.esm.js?2f62:335)
    at VueComponent.focusSearch (ShoppingCart.vue?0f5b:96)
    at keydown (eval at ./node_modules/cache-loader/dist/cjs.js?
    ...

Это всегда происходит в этом случае:

Маршрутизатор выдвигает на представление с моим ItemSearchкомпонент и компонент, который запускает мутацию магазина.На данный момент все работает нормально.Теперь я пересылаю маршрутизатор в другое представление, которое не имеет ничего общего, и затем я возвращаюсь с переадресацией маршрутизатора к исходному представлению.В этот момент, когда происходит мутация, я получаю сообщение об ошибке.

Есть идеи о том, что происходит?

Answer 1

Когда ваш компонент отключен / уничтожен, подписка на мутации будет действовать в магазине.Вот почему ссылка this в вашем подписчике становится undefined.

Что вам нужно сделать, это удалить подписку, когда ваш компонент уничтожен.См. https://vuex.vuejs.org/api/#subscribe...

Чтобы прекратить подписку, вызовите возвращенную функцию отказа от подписки.

Например

mounted () {
  // the name isn't really important and since this isn't a reactive property,
  // you don't need to have this defined in "data"
  this.focusSearchUnsubscriber = this.$store.subscribe(...)
},
beforeDestroy () {
  this.focusSearchUnsubscriber() // call the unsubscribe function
}

Вы заметите, что ятакже используется mounted вместо created.Это связано с тем, что ваш $refs не будет заполнен до тех пор, пока ваш компонент не будет смонтирован, поэтому использование более позднего хука жизненного цикла добавляет немного дополнительной безопасности.