Error message: "Encountered an issue while accessing the 'id' property of a null value within the Vuex store module stored in

Question

Error message: "Encountered an issue while accessing the 'id' property of a null value within the Vuex store module stored in

One issue I am facing is with my store module for current user. After logging into the app, I store user data in it. However, upon logging out and being redirected to the login page, I remove the current-user data from local storage.

Interestingly, following the logout process, a console error appears:

Cannot read property 'id' of null

This error stems from how I have configured values in my current user module:

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

The issue occurs because the code attempts to access the local storage object that no longer exists after deletion during the log out process. I'm seeking advice on the best approach to address this problem as I am relatively new to working with Vue and uncertain if my current implementation is appropriate.

javascript vue.js local-storage vuex vuex-modules

Answer 1

Answer №1

give this a shot

let user = {
        info: {
            id:JSON.parse(localStorage.getItem('active-user')) && JSON.parse(localStorage.getItem('active-user')).id || '',
            name: JSON.parse(localStorage.getItem('active-user')).name || '',
        }

Answer 2

give this a shot

let user = {
        info: {
            id:JSON.parse(localStorage.getItem('active-user')) && JSON.parse(localStorage.getItem('active-user')).id || '',
            name: JSON.parse(localStorage.getItem('active-user')).name || '',
        }

Answer 3

Answer №2

In my opinion, utilizing getters would offer a more effective solution, particularly when there is a need for some form of logic (even if it's as simple as checking for existence).

Here is an example:

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

Answer 4

In my opinion, utilizing getters would offer a more effective solution, particularly when there is a need for some form of logic (even if it's as simple as checking for existence).

Here is an example:

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

Error message: "Encountered an issue while accessing the 'id' property of a null value within the Vuex store module stored in

Answer №1

Answer №2

Similar questions

Struggling to Parse JSON Responses?

Convert the shortDate format in AngularJS to display as 'M/d/yy' in a label or string

How can I apply various textures in three.js?

Exporting data from AngularJS to Excel is not functioning correctly in Internet Explorer. Additionally, the exported Excel file does not display properly in Firefox and

Tips for preserving the content of a text field within the text field area

Error: The function `res.status` is unsupported

Is there a way to fetch a file using the fs readFile function in node.js without explicitly stating the file name?

Which should I opt for when defining a Model - Sequelize or DataType?

Issues with CSS background colors

Vue.js problem with conditional rendering using v-if

Ways to substitute EACH word in JQuery or JavaScript?

The Mantine date picker is causing an error stating that objects are not valid as a React child

Error: Unable to find module 'app' in the injector. This issue is specific to Firefox browser

Struggling to generate a fresh invoice in my project using React.js

What is the best way to extract text from a string that is enclosed by two particular words?

Repairing the 'Uncaught TypeError: Cannot read property 'split' of undefined' bug in a Prestashop Module

Struggling to render ARGB unsigned long data onto an HTML canvas

Adjust the height of images to be consistent

I need help with making multiple XMLHttpRequests within a single JavaScript file. Can someone provide guidance on

Identifying android devices with low resolution