v-навигация-ящик падает в беглый цикл при изменении размера окна

v-навигация-ящик падает в беглый цикл при изменении размера окна

18.09.2019 06:41:37 Просмотров 63 Источник

Во-первых, позвольте мне сказать, что V-навигация-ящик работает по назначению, т. е.:

  • При нажатии на меню гамбургера мутация TOGGLE_DRAWER фиксируется, и она переключает open/closed, обновляя состояние.
  • При изменении размера окна он открывается/закрывается в назначенной точке останова

Так что это работает.

Но изменение размера окна неправильно переключает мутацию, и я продолжаю получать ошибку мутации Vuex при изменении размера окна:

enter image description here

Я понимаю, почему я получаю эту ошибку- $store.state.ui.drawerмодифицируется вне мутатора (это v-model):

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

Я понимаю, что это плохой тон, чтобы привязать государство к v-модели. Но когда я пытаюсь сделать drawerи get(), который правильно получает / фиксирует мутацию, браузер падает (предположительно потому, что метод set запускает бесконечный цикл коммитов, переключающих set()true / false в бесконечность):

drawer

Я бесконечно искал решение этой проблемы. Это беспокоит меня, хотя визуально кажется, что это работает.

Я рассмотрел возможность запуска V-navigation-drawer в режиме без состояния и обработки всех событий изменения размера окна и обновлений состояния вручную. Я также рассматривал возможность отключения "строгого" режима в Vuex (который скрывал бы ошибки). Но первое намного сложнее, а второе-это бандаж, который стоит мне отладки понимания в разработке.

У вопроса есть решение - Посмотреть?

Ответы - v-навигация-ящик падает в беглый цикл при изменении размера окна / v-navigation-drawer drops into a runaway loop on window resize

Yom S.

18.09.2019 07:46:32

Это звучит как идеальный кандидат для Лодашь по debounce функции. Если вам нужно придерживаться использования setter/getter при применении этого эффекта, посмотрите на этот пост ; в противном случае это один для последовательной подписки на события на любом из крючков жизненного цикла.

Является ответом!
hackerESQ

18.09.2019 06:41:34

Проведя некоторое время с этим, я думаю, что у меня есть решение. Хотел поделиться для всех, кто может столкнуться с той же проблемой с VNavigationDrawer, используя состояние Vuex для управления видимостью.

Событие @inputпередает val

Вот действие отправляется:

<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) } } }, в магазине Vuex.

В принципе, входное событие может следить за обновлениями ящика, а затем обновлять состояние ящика, если это необходимо.

Вы также увидите выше, что я упрямо принял usingval, как предлагают документы, хотя я думаю, что это должно контролироваться v-моделью.

Кажется, работает - с правильными событиями, вызванными и состояние обновляется соответствующим образом.

Закрыть X