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

Question

[Леха Ярков]

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

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

Собственно суть вопроса: правильно ли так делать, как я и сильно ли это нагрузит браузер? Я имею ввиду использовать функцию для отслеживания состояния.

Answer 1

[Evgeny Kulakov]

Можно использовать mapState или mapGetters для проброса значений из стора, так будет минимум glue кода, т.е. в вашем случае в компоненте можно написать:

import {mapState} from 'vuex'

...

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

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

md-list-item(v-if='session && session.id')

Comments

[Леха Ярков]

Спасибо большое

Answer 2

[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.

Comments

[furrya_black]

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

watch: {
    'myGetter': 'myMethod',
    myGetter(value) {
        // при изменении свойства в стэйте vuex
        // будет вызван этот код
    }
}

[furrya_black]

Какие то данные (токен юзера, его логин/etc) можно сохранять в локальный стор, геттер который достает такие данные сначала смотрит в vuex, потом в local store, если надо, апдейдит vuex, возвращает данные.

[Леха Ярков]

furrya_black:

Посмотрите повнимательней на localforage

Да смотрел я на него, когда на Angular делал приложение. Что-то не очень мне нравится.
За ответ спасибо, попробую все что вы написали.

vue-cli init wepback myproject

Слишком сложно для меня пока. Слишком много оверхеда, который мне пока не нужен (я тут пока с webpack разобрался...).
Для себя я удобную структуру выработал, пока ее придерживаюсь.