Whenever I navigate to this specific route, I consistently encounter an error message in my console

    VM28353:1 Error: Unexpected token 'o' found in JSON at position 1
    at JSON.parse (<anonymous>)
    at getUser (auth.js?c7d4:11)
    at wrappedGetter (vuex.esm-browser.js?5502:335)
    at Object.eval [as getUser] (vuex.esm-browser.js?5502:88)
    at Object.get [as getUser] (vuex.esm-browser.js?5502:135)
    at Proxy.getuser (Profile.vue?c66d:98)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?a1e9:1086)
    at Object.get [as getuser] (runtime-core.esm-bundler.js?5c40:2109)
    at Proxy.render (Profile.vue?c66d:26)

Profile.vue This file contains the code that invokes the getters

computed: {
       getuser() {
        return this.$store.getters.getUser;
       },
     },

    

Auth.js The console indicates that the error originates from the getUser getter within the auth module

    const getters = {
       isLoggedIn: (state) => !!state.token,
       getUser: (state) => JSON.parse(state.user),
       getToken: (state) => state.token,
    };

    const mutations = {
      setToken: (state, payload) => {
        state.token = payload;
        localStorage.setItem("auth_token", payload);
      },
      setUser: (state, payload) => {
        state.user = payload;
        localStorage.setItem("user", JSON.stringify(payload));
      },
    };

Answer №1

It appears that the state.user is already an object, so there is no need to utilize JSON.parse since it converts the input into a string. The default behavior of the toString() method for JavaScript objects returns [object Object], leading to the observed outcome.

Consider removing that in order to simplify your code like this:

const getters = {
       isLoggedIn: (state) => !!state.token,
       getUser: (state) => state.user,
       getToken: (state) => state.token,
    };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What strategies can I use to streamline this array update function code?

Looking to simplify my updated array function. The update function involves updating and comparing values in an array. The comparison will be done within the fruit_temp. For example, data in fruit_temp's fruit_db_id corresponds to an existing id in th ...

DOJO Dialogue Box Report - Problem

I'm currently facing a challenge with incorporating javascript into the dialog box of my application. Here is an example of the code I am struggling with - var profileDialog1 = new Dialog({ title: "Create Profile", style: "width: 700px;he ...

Steps for deploying an ejs website with winscp

I have developed a Node.js web application using ExpressJS, with the main file being app.js. Now I need to publish this website on a domain using WinSCP. However, WinSCP requires an index.html file as the starting point for publishing the site. Is there ...

Executing Javascript within an iframe

Is there a way to include a script in an iframe? I came up with the following solution: doc = $frame[0].contentDocument || $frame[0].contentWindow.document; $body = $("body", doc); $head = $("head", doc); $js = $("<script type='text/javascript&a ...

Looking for a particular root node in a tree structure?

I am currently working on converting docx files to xml and using DOM to locate the parent node of a specific element. For instance <chapter> <title> <label>Chapter 1 </label> </title> ...

Vuejs and its unique feature of nested and interconnected slots

Utilizing Vuejs, I have developed two components known as First and Second. The component First renders the component Second. Second contains a named slot. First includes a <template> to fit into the named slot of Second. Within the <template> ...

Ways to conceal buttons according to your 'occupation'?

I am currently developing an application and I would like to have certain buttons displayed based on the user's $job. There are four job roles stored in mysql databases: student teacher staff principal, The signup button should only be visible to te ...

the spillage exhibits only a thin streak of gray

My website is primarily a Single Page Website, however, there are specific pages that can only be accessed by registered users. On the website, there is a section referred to as a "block" where you will find a button labeled "Login / Register". Upon clicki ...

What methods work best for retrieving non-API data in Next.js when deploying on Vercel?

Before rendering my application, I am working on fetching my data. Luckily, Next.js offers a method called getStaticProps() for this purpose. Currently, I am utilizing the fs module to retrieve data from a json file in my local directory. export async fun ...

The for loop does not pause until the ajax response is received

When I enter the for loop, an ajax call is made. However, the for loop does not wait for the ajax call to receive a response before incrementing the value, causing the response to update to the wrong div element. For example: Let's say we have ' ...

How can you style a two-item list in Material-UI React to display the items side by side?

I have a list that contains two items: 'label' and 'value'. This is the current layout: https://i.stack.imgur.com/HufX7.png How can I rearrange the items on the right to be positioned next to the label on the left? https://i.stack.im ...

Determine the hour difference between two provided dates by utilizing the date-fns library

My API returns a "datePublished" timestamp like this: "2019-11-14T14:54:00.0000000Z". I am attempting to calculate the difference in hours between this timestamp and the current time using date.now() or new Date(). I am utilizing the date-fns v2 library fo ...

I'm curious about how I can apply @media queries given that certain phones possess higher resolution than computers

There seems to be a common recommendation to utilize @media queries for adjusting CSS based on whether the user is on mobile or not. However, I'm a bit confused because my phone has a width of 1440p while my computer has 1920p. Should I consider apply ...

Service error: The function of "method" is not valid

In one of my Angular 2 applications, I have a class that contains numerous methods for managing authentication. One particular method is responsible for handling errors thrown by the angular/http module. For example, if a response returns a status code o ...

How can Vue define the relationship on the client-side when submitting a post belonging to the current user?

Currently, I am developing an application using Node.js, specifically Express server-side and Vue client-side, with SQLite + Sequelize for managing the database. One of the features of this app is that a user can create a post. While this functionality ex ...

Exploring ES6 classes in Java Script: accessing prototype properties

After searching extensively for an answer and coming up empty-handed, I decided to pose my question here. When creating an object constructor in JavaScript as shown below: function Car(speed){ this.speed = speed; this.position = 0; } Car.prototype.m ...

Having trouble with AES decryption on my nodeJS/ExpressJS server backend

Looking to decipher data post retrieval from mongoDb. The retrieved data comprises encrypted and unencrypted sections. app.get("/receive", async (req, res) => { try { const data = await UploadData.find(); const decryptedData = data. ...

The destroySlider() function of BxSlider fails to work due to either an undefined slider or a function that is not

I'm facing an issue with my carousel setup using bxslider. Here is the code snippet responsible for initializing the carousel: jQuery(document).ready(function() { var carouselWidth = 640; var carousel; var carousel_Config = { minSlides: 1, ...

What is the best way to incorporate user input and output functionality in a React Javascript application with Material UI for a seamless display?

I am trying to achieve a similar output as shown in this code http://jsfiddle.net/6vqd4vnq/ but using material ui/reactjs. Is there something missing in my setup that is preventing the content from being displayed correctly like in the provided link whic ...

Extracting information from JSON and presenting it in a structured table format

I've hit a wall with this JavaScript issue on my website. I'm trying to convert API JSON data into a table, and it's working fine when the data is on separate lines. However, when I introduce nested arrays in the JSON data, everything ends u ...