无法从 Localstorage 读取 vuex 存储模块中 null 的属性“id”

Question

我有一个当前用户的存储模块。基本上，在我登录到我的应用程序后，我会在其中保留用户数据。但是，当我注销时，我会被重定向到登录页面，并在注销时从本地存储中删除当前用户数据。

但是一旦我退出，我的控制台就会出现这个错误：

无法读取 null 的属性“id”

这是因为我在当前用户模块中初始化值的方式如下：

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

所以它尝试访问本地存储对象，因为我在注销时将其删除，所以该对象不再存在。 处理此问题的最佳方法是什么？我是 vue 的新手，所以即使一开始我也不确定我正在做的事情是否是一件好事。

Answer 1

如果涉及任何类型的逻辑（即使它只是检查是否存在），我认为 getter 将是一个更好的解决方案。

尝试：

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 || '',
        }