Verwendung von localStorage in Vue. Wo muss ich es verwenden?

Question

Ich möchte localStorage verwenden, damit die Daten beim Neuladen der Seite gespeichert werden.

Ich verwende Vuex, um zu verfolgen, ob sich eine Person registriert hat. Und wenn die Seite geladen wird, ist die Person hoffentlich bereits registriert.

Mein Vuex-Code lautet wie folgt:

export default {
    Zustand:{
        isRegistered:false
    },
    Aktionen:{
        registrate({commit}) {
            commit("login")
        },
        exit({commit}) {
            commit("abmelden")
        }
    },
    Mutationen:{
        login(state) {
            state.isRegistered=true;
        },
        Abmelden(Status) {
            state.isRegistered=false
        }
    },
    Getter:{
        IS_REGISTERED(Staat){
            Geben Sie state.isRegistered zurück
        }
    }
}

Links in meinem Vue.js

<template>
    <header class="hat">
        <div class="header__buttons">
          
    
            <div v-if="IS_REGISTERED" id="exit--title">
                <button @click="exitFromSystem">System verlassen</button>
            </div>
    
            <router-link :to="{name:'registration'}">
                <button id="registration" v-if="!IS_REGISTERED">Registrierung</button>
            </router-link>
        </div>
    </header>
</template>


<script>
    Methoden: {
        ...mapActions(["exit"]),
        exitFromSystem() {
            this.exit() // In Vuex suchen
        },
    },
</script>

 Wo kann ich localStorage am besten verwenden, um IS_REGISTERED beim Neuladen der Seite zu speichern?

Answer 1

Translation: 我自己解决了这个问题，// npm-> npm install vuex-persistedstate // OR // yarn-> yarn add vuex-persistedstate

在我的store中，需要像这样添加：

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

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