v-навигация-ящик падает в беглый цикл при изменении размера окна
Во-первых, позвольте мне сказать, что V-навигация-ящик работает по назначению, т. е.:
- При нажатии на меню гамбургера мутация TOGGLE_DRAWER фиксируется, и она переключает open/closed, обновляя состояние.
- При изменении размера окна он открывается/закрывается в назначенной точке останова
Так что это работает.
Но изменение размера окна неправильно переключает мутацию, и я продолжаю получать ошибку мутации Vuex при изменении размера окна:
Я понимаю, почему я получаю эту ошибку- $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
18.09.2019 07:46:32
Это звучит как идеальный кандидат для Лодашь по debounce функции. Если вам нужно придерживаться использования setter/getter при применении этого эффекта, посмотрите на этот пост ; в противном случае это один для последовательной подписки на события на любом из крючков жизненного цикла.
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-моделью.
Кажется, работает - с правильными событиями, вызванными и состояние обновляется соответствующим образом.