Задать вопрос
yarkovaleksei
@yarkovaleksei
Это твинк. Основной акк: @yarkov (в бане)
vue

Как в Vue отследить изменение объекта в Vuex.store?

С Vue знаком второй день. До этого был опыт разработки SPA на Angular 1.6.
Сейчас пытаюсь построить архитектуру сразу правильно, с использованием Vuex, ибо будет большое SPA. И вот такой затык у меня.
Надо отображать несколько ссылок в меню только авторизованному юзеру.
Вот так я собираю store и добавляю его к компоненту меню: https://gist.github.com/yarkovaleksei/a09521de1a11...
Отталкивался от https://github.com/vuejs/vuex/blob/dev/examples/todomvc

Теперь если написать в шаблоне так: (pug)
md-list-item(v-if='session && session.id')
    //-отображать меню

То сработает проверка только при загрузке страницы и на изменения store.state.session нет реакции. А вот если так написать: (pug)
md-list-item(v-if='getSession() && getSession().id')
    //-отображать меню

То все меняется реалтайм. Стираю сессию - меню пропадает. Добавляю - меню появляется.
Я понимаю, что в случае с авторизацией надо делать перезагрузку страницы. Просто пример привел. В будущем подобных моментов будет много и хочется сразу правильно решать вопрос.

Собственно суть вопроса: правильно ли так делать, как я и сильно ли это нагрузит браузер? Я имею ввиду использовать функцию для отслеживания состояния.
  • Вопрос задан
  • 5577 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Можно использовать mapState или mapGetters для проброса значений из стора, так будет минимум glue кода, т.е. в вашем случае в компоненте можно написать: 
import {mapState} from 'vuex'

...

  computed: {
    ...mapState(['session'])
  }


И далее в компоненте его использовать:

md-list-item(v-if='session && session.id')
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
@furrya_black
Отталкивайтесь от этого https://github.com/codecasts/spa-starter-kit

Посмотрите этот курс https://coursehunters.net/course/udemy-vuejs-2

Я был в вашем положении, отталкивался от spa-starter-kit , сейчас пересматриваю некоторые видео из курса.

Так же постоянно открыта дока по vue, vue router и vuex.

В итоге я вообще отказался от всяких spa стартеров и прочих "todo" в пользу
vue init wepback myproject


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

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

Посмотрите повнимательней на localforage как замене для localStorage, даже если вам нужен только localStorage.
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Разработчик Vue.js
Кортекс
от 60 000 до 100 000 ₽
Разработчик (Frontend developer / Vue.js)
МСтрой
от 99 999 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Каталог AI tools
18 апр. 2024, в 01:12
150000 руб./за проект
Загрузка характеристик из xml/csv файла в карточки товаров WordPress
18 апр. 2024, в 00:58
5000 руб./за проект
Нарисовать подарки для соц сети
18 апр. 2024, в 00:10
50000 руб./за проект
Ещё заказы