Utilisation de localStorage dans Vue. Où dois-je l'utiliser ?

Question

Je souhaite utiliser localStorage pour que les données soient enregistrées lors du rechargement de la page.

J'utilise Vuex pour savoir si une personne est enregistrée. Et j'espère que lorsque la page se chargera, la personne sera déjà inscrite.

Mon code Vuex est le suivant :

export par défaut {
    État:{
        est enregistré : faux
    },
    Actions:{
        s'inscrire({commettre}) {
            commit("connexion")
        },
        quitter({commettre}) {
            commit("déconnexion")
        }
    },
    mutation :{
        connexion (état) {
            state.isRegistered=true ;
        },
        déconnexion (état) {
            state.isRegistered = faux
        }
    },
    getteurs :{
        IS_REGISTERED(état){
            état de retour.isRegistered
        }
    }
}</pré>
<p>Liens dans mon Vue.js</p>
<pre class="brush:php;toolbar:false;"><template>
    <header class="chapeau">
        <div class="header__boutons">
          
    
            <div v-if="IS_REGISTERED" id="exit--tittle">
                <bouton @click="exitFromSystem">Quitter du système</bouton>
            </div>
    
            <router-link :to="{name:'registration'}">
                <id du bouton="enregistrement" v-if="!IS_REGISTERED">Inscription</bouton>
            </lien-routeur>
        </div>
    </en-tête>
</modèle>


<script>
    méthodes : {
        ...mapActions(["sortie"]),
        exitFromSystem() {
            this.exit() //Regarde dans Vuex
        },
    },
</script>

 Quel est le meilleur endroit pour utiliser localStorage pour enregistrer IS_REGISTERED lors du rechargement de la page ?

Answer 1

Traduction : j'ai résolu ce problème moi-même, // npm-> npm install vuex-persistedstate // OR // Yarn-> Yarn Add vuex-persistedstate

Dans mon magasin, il doit être ajouté comme ceci :

import Vue from "vue"
import Vuex from "vuex"
import createPersistedState from "vuex-persistedstate";

export default new Vuex.Store({
   modules:{
       // 
   },
   plugins:[createPersistedState()]
}