How to track the change of an object in Vuex.store in Vue?

Question

JavaScript

Hello. With Vue the second day is familiar. Before that, there was experience in developing SPA on Angular 1.6.
Now I'm trying to build the architecture right away correctly, using Vuex, because there will be a big SPA. And here is such a plug I have.
It is necessary to display several links in the menu only to an authorized user.
This is how I build the store and add it to the menu component: https://gist.github.com/yarkovaleksei/a09521de1a11...
Based on https://github.com/vuejs/vuex/blob/dev/examples/todomvc
Now if you write in the template like this: (pug)

md-list-item(v-if='session && session.id')
    //-отображать меню

Then the check will work only when the page is loaded and there is no reaction to changes in store.state.session . But if you write like this: (pug)

md-list-item(v-if='getSession() && getSession().id')
    //-отображать меню

Everything changes realtime. I erase the session - the menu disappears. I add - the menu appears.
I understand that in the case of authorization, you need to reload the page. Just gave an example. There will be many such moments in the future and I want to immediately solve the problem correctly.
Actually the essence of the question: is it right to do it the way I do and will it heavily load the browser? I mean use a function to keep track of the state.

Answer 1

You can use mapState or mapGetters to pass values ​​from the store, so there will be a minimum of glue code, i.e. in your case in the component you can write:

import {mapState} from 'vuex'

...

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

And then use it in the component:
md-list-item(v-if='session && session.id')

Answer 2

Start from this https://github.com/codecasts/spa-starter-kit
Check out this course https://coursehunters.net/course/udemy-vuejs-2
I was in your position, build from spa-starter-kit . I'm currently rewatching some of the videos.
The dock for vue, vue router and vuex is also constantly open.
As a result, I generally abandoned all spa starters and other "todos" in favor of
Yes, I do not give you a direct answer to your question, only advice on how not to step on the rake that I stepped on.
Watching your code by reference, you are laying down an architecture that is inconvenient for scaling in advance.
Take a closer look at localforage as a replacement for localStorage, even if you only need localStorage.