Vue. Vuex 저장소의 값이 수정될 때 구성 요소의 입력에 포커스 설정

Vue. Vuex 저장소의 값이 수정될 때 구성 요소의 입력에 포커스 설정

내 컴포넌트에 있는 코드는 다음과 같습니다.

//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)                    
                }
        })
    }, 

이것은 다른 컴포넌트에서 호출할 수 있는 my store 변환입니다.

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 구성 요소와 저장소 변환을 트리거하는 구성 요소를 사용하여 보기를 푸시합니다.지금은 모든 것이 잘 되고 있다.여기서 라우터를 다른 뷰로 푸시하고 라우터 푸시를 원래 뷰로 되돌립니다.이 순간 돌연변이가 일어나면 오류가 발생합니다.

무슨 일인지 짐작 가는 거 없어?

컴포넌트가 마운트 해제/파기되면 변환 서브스크립션은 스토어에서 계속 유지됩니다.이게 바로 그 이유죠.this서브스크라이버 내의 참조가undefined.

컴포넌트가 파괴되면 서브스크립션을 삭제해야 합니다.https://vuex.vuejs.org/api/ #http://https://vuex.vuejs.org/api/ 를 참조해 주세요.

구독을 중지하려면 반환된 구독 취소 함수를 호출합니다.

예를들면

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컴포넌트가 마운트될 때까지 입력되지 않으므로 나중에 라이프 사이클 후크를 사용하면 안전성이 향상됩니다.

언급URL : https://stackoverflow.com/questions/53999936/vue-set-focus-on-a-components-input-when-value-in-vuex-store-is-modified