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

Running res.render in an asynchronous manner within an express application

My goal is to make this router respond asynchronously: var express = require('express'), router = express.Router(); router.get('/', function(req, res, next) { res.render('contact', { titleShown: true, title: & ...

Is there a way to prevent items from being automatically sorted within a single panel using Vue.Draggable?

Using @vue/cli 4.0.5 / vuedraggable 2.24.1, I have created two panels with draggable elements that can be moved between panels but not sorted within one panel. After reviewing the documentation at https://github.com/SortableJS/Vue.Draggable, I came across ...

"Exploring the Functionality of Page Scrolling with

Utilizing Codeigniter / PHP along with this Bootstrap template. The template comes with a feature that allows for page scrolling on the homepage. I have a header.php template set up to display the main navigation across all pages. This is the code for th ...

Generate a specified quantity of elements using jQuery and an integer

I am working with a json file that contains an items category listing various items through an array. This list of items gets updated every few hours. For example: { "items": [ { "name": "Blueberry", "img": "website.com/blueberry.png" } ...

After successfully executing an AJAX request three times, it encountered a failure

I have implemented a script to send instant messages to my database asynchronously. Here is the code: function sendMessage(content, thread_id, ghost_id) { var url = "ajax_submit_message.php"; var data = { content: content, thread_id: thread_id }; ...

Accessing an Array from a service method in Angular and passing it to my main component

Within my api-service.ts, I have an array that holds some data. public getData():Observable<any[]> { return Observable.toString[ObsResult]; } Now, in the main component, I am attempting to call the getData() method to render the data in ...

Tips for incorporating multi-lingual email templates into your node.js application

I integrated node email templates into my project to automatically send emails to users based on certain events. Check out the Node Email Templates GitHub page for more information. For sending emails with Node.js, Nodemailer is a great tool. While I wa ...

Refresh content on a stationary Nuxt website

I have experience building websites with Nuxt SSR, but I have yet to explore the static aspect. From my understanding, when building with Nuxt, all API calls are automatically executed and cached during build-time. If I want to create a blog using a stat ...

Incorporating asynchronous file uploads to a server using a for loop

I am in the process of transforming my original code into "async" code. The initial code queries the database and retrieves the results, which includes images. I want to optimize writing the images asynchronously to my nodejs server as the current synchro ...

Vue.js 2 - Sending events from one Vue application instance to another: A step-by-step guide

I am currently using webpack along with Single File Components. Within my project, I have two instances of Vue being utilized. One instance is integrated into the menu header to display a Cart Shopping dropdown: import Vue from 'vue'; import App ...

"Unexpected behavior: NextAuth is failing to return defined custom scopes

I am currently working on a NextJS project that utilizes NextAuth. Initially, everything was functioning properly with the default scopes. However, my project now requires additional claims, which are listed in the supported scopes here. "scopes_supporte ...

What is the best way to partially change a CSS class name in Vue?

Imagine you have this HTML snippet <div class="progress-bar w-90"></div> and now you want to replace the value 90 with an object from Vue. Below is the attempt, but the syntax seems off: <div :class="progress-bar w-{{ progres ...

Preserve content from a hyperlink using JavaScript

How can I store a value to the cache using JavaScript when clicking on an anchor link? The code below sets up the dynamic content: <a align="left" href="projectoverview.html">Test Manager</a> I want to save the text "Test Manager" to the cach ...

What could be the reason behind the malfunctioning of $.getjson?

I've been facing issues trying to access remote json data. Initially, I resorted to using as a temporary fix but it's no longer serving the purpose for me. As of now, I am back at square one trying to resolve why I am unable to retrieve the remo ...

Identifying an anonymous function with a name (using .name versus .displayName)

In the context of my react native project, I have come across a function with an undefined name that is not being inferred. This function looks like: const f = function() {}; Despite maintaining its anonymous definition, there is an attempt to assign a na ...

Fill the second dropdown menu options based on the selection made in the first dropdown menu

I need assistance with dynamically populating my second drop-down menu based on the selection made in the first drop-down. Here are the steps I've taken so far: form.php - Utilizing javascript, I have set up a function to call getgeneral.php. The se ...

How can I utilize JavaScript to retrieve the background color of a table cell upon clicking?

I am trying to create a function where an alert pops up displaying the background color of a table cell whenever it is clicked. Unfortunately, I am having trouble accessing and retrieving the background color value. The table cell in question is defined a ...

Storing data in the browser's LocalStorage after a Vue3 component has

Whenever a user successfully logs into the application, a nav bar is supposed to load user data. However, there seems to be a timing issue with localStorage being set slightly after the nav bar is loaded. Using a setTimeout() function resolves the issue, b ...

Display a hyperlink in an iframe on the main page from a different domain using JavaScript

I'm currently using Angular with Wirecard as my payment provider. When I need to add a payment, I open an iframe that directs the user to the Wirecard site to accept the payment. Once the user clicks accept, I provide a link back to my site from Wirec ...

Require a v-alert notification to appear on every page, ensuring visibility across the site

Imagine a scenario where there is a right drawer that displays a grade dropdown with options like grade1, grade2, and grade3. On all pages, I need a v-alert notification strip to show the total count of students. For example, if I select grade3 from the ri ...