The generated hook in vuejs is throwing an error stating that window/localstorage is not defined

My goal is to save an authenticated user to local storage and then load them into Vuex on the next page load.

created () {
    let user = window.localStorage.getItem('user')
    if(user) {
        this.setUser(JSON.parse(user))
    }
}

I initially believed that placing this logic in the created hook of my root component would be appropriate. However, I encountered the error 'window is not defined'.

After trying different approaches, I found that placing it in the mounted hook resolved the issue. Although, this did result in a brief display of the login page before loading the user information.

The question remains: where is the best location to put this logic?

Answer №1

To simplify your code, consider removing the window by eliminating the need to write

let user = localStorage.getItem('user')

If this solution is not enough for your requirements, you can utilize the vuex plugin available at https://github.com/robinvdvleuten/vuex-persistedstate. This plugin offers hassle-free functionality with zero configuration needed. You can specify a single value to be persisted by setting it as a path in the plugin's configuration settings.

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

Replace specific text with a span element around it?

I am working with the following HTML code: <p class="get">This is some content.</p>. My goal is to modify it so that it looks like this: <p class="get">This is <span>some</span> content.</p>. To achieve this, I have ...

Troubleshooting: JavaScript code not functioning properly with variable input instead of fixed value

I have encountered an issue with a JS function that I'm using. The function is shown below: // A simple array where we keep track of things that are filed. filed = []; function fileIt(thing) { // Dynamically call the file method of whatever ' ...

Converting a child.jsp file into a modal or overlay using JavaScript: A step-by-step guide

Is it possible to call a child.jsp as a model using JavaScript? I previously accessed the child jsp using showmodaldialog and window.open() with JavaScript, but it opens in another window. I want the child jsp to appear in a modal or overlay view. Can some ...

Is it necessary to use Hapi.js on the client side in order to establish a websocket connection using the Hapi.js protocol?

Currently, I am in the process of developing an API using Hapi and requiring WebSocket functionality. After some research, it appears that Nes is the preferred choice to integrate with Hapi for this purpose. Fortunately, Nes simplifies the process signific ...

Tips for incorporating external JavaScript code into React components

I have been tasked with integrating a graphical widget into a React component for a project I am working on. The widget_api code provided by RIPE Stat is required to accomplish this. Previously, in HTML5, the integration was successful using the following ...

Path to local image in JavaScript

Apologies for the newbie question, but I'm trying to display a gif on a webpage using an HTTP link and it works perfectly. However, when I try to replace it with a file path, it doesn't work. The gif is located in the same folder as the webpage. ...

Querying Techniques: Adding an Element After Another

CSS <div id="x"> <div id="y"></div> <div> <p>Insert me after #y</p> The task at hand is to place the p tag after '#y', and whenever this insertion occurs again, simply update the existing p tag instead of ...

Using Material-UI to implement a Link component from the react-router library

I'm having trouble integrating the <Link/> component into my material-ui AppBar. Here is my navigation class: class Navigation extends Component { constructor(props) { super(props) } render() { var styles = { appBar: { ...

Ways to manage V-show in a dynamically changing environment

I am currently in the process of developing an Ecommerce shopping platform. I have been importing data from a JSON file and successfully printing it using a v-for loop. One feature I am implementing is the Show Order Details option, where clicking on it re ...

A guide on invoking an onclick function within a Template literal in React.js

I am seeking assistance with implementing an on-click function using template literals in React JS. When a button within the template literal is clicked, I want to trigger another function in React JS. addPopupToLayer = (surface, layer) => { cons ...

Stop and start an Express.js server using the original port number

Currently, my Node.js application utilizes Express.js to handle incoming connections. The code snippet looks something like this: const express = require("express"); var server = express(); server.get("/test", (req, res) => testResponse(req, res)); ser ...

Animating Jquery to smoothly change opacity until it reaches 100% visibility

The script I have does several things, but the main issue lies in the last line where the opacity of the class doesn't seem to reach 100%.... $('.fa-briefcase').parent().on('click', function () { $("#colorscreen").remove(); ...

Uploading Massive Form Data Using Angular JS

After spending countless hours on this project, I still can't figure out how to post data into a table using JavaScript objects. While I can easily work with smaller data sets, I'm struggling with handling multiple nested objects. EDIT: ...

What is the best way to ensure that a div containing lengthy text wraps to the next line as if it were only text overflow?

Is there a way to make a div or span within another div act as text, causing overflow to shift to the next line? I'm unsure of which CSS properties would achieve this effect. I've attempted using overflow-wrap: break-word; word-break: break-al ...

react: implement custom context menu on videojs

Can someone assist me with adding a quality selector and disabling the right-click option in a webpage that uses videojs? I am unsure about using plugins, as there were no examples provided in react. Any guidance would be appreciated. VideoPlayer.js impor ...

What is the best way to use JavaScript to emphasize the searched text in a textbox?

My application uses JavaScript and I am looking to both highlight the search element and keep the cursor in the textbox positioned at the search item. Can anyone suggest a way to accomplish this using JavaScript? ...

Designing a dropdown menu within displaytag

I am currently utilizing displaytag to present tabular data, but I aspire to design a user interface akin to "kayak.com" where clicking on a row reveals additional details without refreshing the page. Here is an example scenario before clicking the Detail ...

Leverage variables in JavaScript to establish a unique style

function AdjustScale(){ scaleX = window.innerWidth / 1024; scaleY = window.innerHeight / 768; element = document.getElementById("IFM"); element.style.transform = "scale(" + scaleX + ", " + scaleY + ")"; } I'm facing an issue with thi ...

Several DIV elements lined up side by side

I've been working on a program that retrieves data from a database, lists some of the data when a button is clicked within the same div, and then creates new divs with buttons that have onclick events until it reaches a certain maximum value. To keep ...

Attempting to deactivate the bootstrap-fullscreen-select feature using JavaScript

Currently, I am in the process of developing a Python Flask server to manage a project that I have undertaken. While exploring different options, I came across bootstrap-fullscreen-select which turned out to be exactly what I needed for my control page. H ...