yarkovaleksei
@yarkovaleksei
Это твинк. Основной акк: @yarkov (в бане)

Как в 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')
    //-отображать меню

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

Собственно суть вопроса: правильно ли так делать, как я и сильно ли это нагрузит браузер? Я имею ввиду использовать функцию для отслеживания состояния.
  • Вопрос задан
  • 5070 просмотров
Решения вопроса 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
@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.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы