Несколько типичных ошибок во Vue.js (Vuex)

Доброго времени суток! Появилось некоторое количество свободного времени, поэтому решил продолжить работу над переводами. Предыдущую статью можно найти по этой ссылке.

Автор, статью которого буду переводить сегодня, один из самых мной любимых. Советую всем блог Максимильяна на Медиуме.

Напоминаю, что я стремлюсь к дословному переводу, а стараюсь передать суть. Поехали!

v-show на теге template

Директива v-show меняет свойство display у целевого элемента, но тег template не создаёт элемента в DOM, поэтому директиве не к чему прицепится. Используйте v-if вместо v-show на теге template или замените его на div.

От переводчика: если мне нужно использовать v-show, например, из соображений производительности, то я обычно вешаю его на БЭМ сущность Блок внутри тега template. Мне кажется это удобным.

Почему элемент в ref не определен?

Эта ситуация может возникнуть, если вы обращаетесь через ref к элементу, который ещё не отрендерен Vue. Например, на его предке висит директива v-if = false.

Эту ситуацию можно исправить, заменив v-if на v-show или дождаться пока элемент будет отрендерен(установив watcher на содержимое v-if).

Обновление свойства в состоянии Vuex

Со временем ваше приложение усложняется и велика вероятность появления одинаковых свойств во Vuex. Это часто может стать причиной обновления не тех свойств при мутации.

Решение проблемы лежит больше в области архитектуры:

а. подбирать для свойств более уникальные, отражающие их суть имена
б. избегать чрезмерной вложенности в свойствах

От переводчика: используйте namespace во Vuex. Не знаю почему Максимильян об этом не упомянул.