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

Question

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

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

Cannot read property 'id' of null

发生这种情况是因为我在 currentuser 模块中初始化值的方式如下：

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

因此它尝试访问本地存储对象，该对象自从我在注销时将其删除后不再存在。处理此问题的最佳方法是什么？我是 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

我认为 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 '';
    }
  }
}

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

Cannot read property 'id' of null in vuex store module from Localstorage

javascript

vue.js

local-storage

vuex

vuex-modules

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

Cannot read property 'id' of null in vuex store module from Localstorage

javascript

vue.js

local-storage

vuex

vuex-modules

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