창 크기 조정 시 v-navigation이 런어웨이 루프로 떨어짐

창 크기 조정 시 v-navigation이 런어웨이 루프로 떨어짐

먼저, v-navigation-drawer가 의도한 대로 작동한다고 하겠습니다.

• 햄버거 메뉴를 클릭하면 TOGGLE_DRAWER 변환이 커밋되고 열림/닫힘으로 전환되어 상태가 업데이트됩니다.
• 창 크기 조정 시 지정된 중단점에서 열림/닫힘

효과가 있습니다.

그러나 창 크기 조정에서는 변환이 제대로 전환되지 않으며 창 크기를 조정할 때 Vuex 변환 오류가 계속 표시됩니다.

이 에러가 발생하는 이유를 알 수 있습니다.$store.state.ui.drawer뮤테이터 외부에서 수정되고 있습니다(v-navigation-matrix의 경우).v-model):

<v-navigation-drawer
        v-model="$store.state.ui.drawer"
        app
        clipped
    >

v-model에 상태를 바인딩하는 것은 잘못된 형식입니다.하지만 제가 이 노래를 만들려 할 때drawer를 사용하여 계산된 속성get()그리고.set()변환을 적절히 취득/실행하는 메서드, 브라우저 크래시(아마도 set 메서드가 커밋 전환의 무한 루프를 트리거하기 때문에)drawertrue/false를 무한대로 입력):

computed: { 
            drawer: {
                get () {
                    return this.$store.state.ui.drawer
                },
                set () {
                    this.$store.commit('TOGGLE_DRAWER') // <--crashes the browser
                }
            }
        }

나는 이 문제에 대한 해결책을 끝없이 찾아다녔다.시각적으로 효과가 있는 것처럼 보여도 신경이 쓰입니다.

v-navigation-drawer를 상태 비저장 모드로 실행하고 모든 창 크기 조정 이벤트 및 상태 업데이트를 수동으로 처리하는 것을 고려했습니다.또, Vuex 로 「Strict」모드를 무효로 하는(오류를 숨길 수 있는) 것도 고려했습니다.그러나 전자는 훨씬 더 복잡하며 후자는 개발에 대한 통찰력을 디버깅하는 데 드는 반창고입니다.

Lodash의 직무에 적합한 후보인 것 같습니다.이 효과를 적용하면서 setter/getter를 계속 사용해야 하는 경우 이 게시물을 참조해 주십시오.그렇지 않은 경우 라이프 사이클 후크에서 순차적으로 이벤트를 등록하는 게시물을 참조해 주십시오.

이것과 함께 시간을 보낸 후, 해결 방법이 생겼다고 생각합니다.Vuex 상태를 사용하여 가시성을 제어하는 VNavigationDrawer에서 동일한 문제에 직면한 다른 사용자와 공유하고자 했습니다.

그@input이벤트가 통과하다valparameter 창 크기 조정 후 드로어 상태를 포함합니다.아래 함수로 호출되는 동작을 새로 만들었습니다.

<v-navigation-drawer
    :value="$store.state.ui.drawer"
    app
    clipped
    @input="updateDrawer($event)"
>

디스패치되는 액션은 다음과 같습니다.

methods: {
    updateDrawer(event) {
        if (event !== this.drawer) { // avoids dispatching duplicate actions; checks for unique window resize event
            this.$store.dispatch('updateDrawer',event)
        }
    }
},

그리고 그 행동은 새로운 것을 커밋한다.valVuex 스토어까지.

기본적으로 입력 이벤트는 드로어의 업데이트를 감시하고 필요에 따라 드로어 상태를 업데이트할 수 있습니다.

을 알이다.:valuev-model에 의해 제어되어야 한다고 생각합니다만,

올바른 이벤트가 호출되고 상태가 적절하게 업데이트되므로 작동 중인 것 같습니다.

언급URL : https://stackoverflow.com/questions/57984763/v-navigation-drawer-drops-into-a-runaway-loop-on-window-resize