Не удается прочитать свойство 'id' из null в модуле хранилища vuex из Localstorage

Question

У меня есть модуль магазина для текущего пользователя.По сути, я сохраняю пользовательские данные в нем после того, как я вошел в свое приложение.Тем не менее, когда я выхожу, я перенаправляюсь на страницу входа и удаляю данные текущего пользователя из локального хранилища при выходе из системы.

Но как только я выхожу, я получаю эту ошибку в своей консоли:

Невозможно прочитать свойство 'id' со значением NULL

Это происходит из-за того, как я инициализирую значения в модуле currentuser, как показано ниже:

const currentUser = {
    state: {
        id: JSON.parse(localStorage.getItem('current-user')).id || '',
        username: JSON.parse(localStorage.getItem('current-user')).username || '',
    },

Таким образом, он пытается получить доступ к объекту localstorage, который больше не существует, так как я удалил его при выходе из системы.Каков наилучший подход к решению этой проблемы?Я новичок в Vue, так что не уверен, что то, что я делаю, это хорошая вещь, чтобы начать с самого начала.

Answer 1

Я думаю, что геттеры были бы лучшим решением, если бы использовалась какая-либо логика (даже если это просто проверка на существование).

попробовать:

const curentUser = {
  getters: {
    id() {
      const cu = localStorage.getItem('current-user');
      if (cu) {
        return JSON.parse(cu).id;
      }
      return '';
    },
    username() {
      const cu = localStorage.getItem('current-user');
      if (cu) {
        return JSON.parse(cu).username;
      }
      return '';
    }
  }
}

Answer 2

попробуйте

const currentUser = {
        state: {
            id:JSON.parse(localStorage.getItem('current-user')) && JSON.parse(localStorage.getItem('current-user')).id || '',
            username: JSON.parse(localStorage.getItem('current-user')).username || '',
        }