Почему state в vuex для отображения токена в localstorage не реактивен?

Question

[lavezzi1]

При логине кладу в localstorage токен, а потом при каждом переходе роута его чекаю, если нет, то выкидываю на страницу логина. Но вот при чеке проблемка:
Вот такое работает, все реактивно, то есть если удалю токен то при следующем переходе покажется страница логина:

// router.js
router.beforeEach((to, from, next) => {
  const isLoggedIn = !!localStorage.getItem('token')
}

А вот такое нет:

// router.js
router.beforeEach((to, from, next) => {
  const isLoggedIn = store.getters.isLoggedIn
}
// store.js
const store = new Vuex.Store({
  state: {
    isLoggedIn: !!localStorage.getItem('token'),
    token: localStorage.getItem('token')
  },
  getters: {
    isLoggedIn(state) {
      return state.isLoggedIn
    },

Answer 1

[Андрей Хохлов]

Так сам local storage то не реактивен, вы все равно что булево значение присвоили изначальному state хранилища.

Храните непосредственно в хранилище токен, записывая его туда из local storage при инициализации. (уже делаете это)
И когда пользователь разлогинивается - меняйте state. В action, которым вызываете мутацию хранилища, очищайте local storage.
При логине - наоборот.

Короче говоря, local storage нужен лишь для того, чтобы хранить токен между визитами пользователя.