1
votes

Comment accéder à localStorage en magasin de NuxtJs?

J'essaie d'obtenir une valeur de localStorage pour déterminer la valeur d'une variable en magasin. Je me souviens avoir essayé quelque chose de similaire avec vuejs il y a environ un an et cela semblait fonctionner. Je n'ai pas non plus de problèmes avec cela sur Reactjs. Mais pour une raison quelconque, j'obtiens toujours cette erreur en faisant de même dans Nuxt

ceci est mon fichier user.js

export const state = () => ({
  isLoggedIn: !!localStorage.getItem('userDetails')
})

export const mutations = {
  login(state) {
    state.isLoggedIn = true;
  },
  logout(state) {
    window.localStorage.clear()
    state.isLoggedIn = false;
  }
}

est-ce que j'aborde ce problème de manière erronée? ou n'est-ce pas censé fonctionner? Toute aide est appréciée.

javascript vue.js nuxt.js vuex

3 commentaires

Faites-vous ssr?

Je le crois. Dois-je recréer l'application en tant que PWA pour que cela fonctionne? mais alors j'abandonnerais le ssr. Existe-t-il une autre solution de contournement? ou recréer en tant que PWA est le seul moyen de contourner ce problème.

@Roj j'ai ajouté une nouvelle réponse pour contourner le problème SSR

3 Réponses :

2
votes

Essayez comme ceci:

isLoggedIn: process.server ? '' : !!localStorage.getItem('userDetails')

Le problème est que vous essayez d'accéder au stockage local alors que nuxt est côté serveur. vous devez vérifier avec process.server si vous êtes du côté serveur ou non. Il renvoie vrai ou faux.

Je ne l'ai pas testé mais avec cet opérateur ternaire cela devrait fonctionner.

Ici: https://nuxtjs.org/faq/window-document-undefined/

2 commentaires

aucune erreur cette fois. Il semble que le problème soit lié au SSR. Je vais probablement devoir refaire tout le projet et désactiver ssr. Merci quand même.

@Roj aucune erreur signifie que vous avez eu accès au stockage local. eh bien vous pouvez aller dans nuxt.config.js et renommer mode: "universal" en mode: "spa" si vous voulez désactiver ssr et n'allez qu'avec le côté client

0
votes

Je vois que vous n'avez défini aucun stockage local. Veuillez définir le stockage local d'ici

localstorage.setItem ()

1 commentaires

ce n'est pas le problème

2
votes

Lorsque vous utilisez SSR, vous n'avez pas accès au stockage du navigateur.

Pour résoudre ce problème, vous pouvez envoyer une action sur le hook du composant monté.

mounted() {

 if(!process.client) return;
 const savedData = localStorage.getItem("userDetails");
 if(savedData){
    this.$store.commit('myMutation',savedData)
}
}

4 commentaires

merci je vais essayer ça. y a-t-il un moyen de s'engager sur ma mutation sur l'application de base elle-même?

Eh bien, vous devriez l'envelopper dans une instruction if if (process.client) {}

Roj, vous pouvez faire de la même manière, dans le crochet monté (). @ifaruki, oui, le mien n'était qu'un moyen d'indiquer le chemin à parcourir, mais vous avez raison. J'ai modifié ma réponse

ce n'était pas ce que je voulais dire. il lancera à nouveau une erreur localStorage n'est pas défini. vous devez tout envelopper dans if (process.client)