Question

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

但是注销后，我会在控制台中收到此错误：

无法读取null的属性“ id”

发生这种情况是因为我如何在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 currentUser = {
        state: {
            id:JSON.parse(localStorage.getItem('current-user')) && JSON.parse(localStorage.getItem('current-user')).id || '',
            username: JSON.parse(localStorage.getItem('current-user')).username || '',
        }

Answer 2

我认为，如果涉及某种逻辑（即使只是检查是否存在），则吸气剂将是一个更好的解决方案。

尝试：

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

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

2 个答案: