Menggunakan localStorage dalam Vue. Di mana saya perlu menggunakannya?

Question

Saya mahu menggunakan localStorage supaya data disimpan apabila halaman dimuat semula.

Saya menggunakan Vuex untuk menjejak sama ada seseorang telah mendaftar. Dan semoga apabila halaman dimuatkan, orang itu sudah berdaftar.

Kod Vuex saya adalah seperti berikut:

eksport lalai {
    nyatakan:{
        isRegistered:false
    },
    tindakan:{
        daftar({komit}) {
            commit("log masuk")
        },
        keluar ({komit}) {
            commit("log keluar")
        }
    },
    mutasi:{
        log masuk(negeri) {
            state.isRegistered=true;
        },
        logout(negeri) {
            state.isRegistered=false
        }
    },
    pengambil:{
        IS_REGISTERED(negeri){
            kembali negeri.isRegistered
        }
    }
}

Pautan dalam Vue.js saya

<template>
    <header class="topi">
        <div class="header__buttons">
          
    
            <div v-if="IS_REGISTERED" id="exit--tittle">
                <butang @click="exitFromSystem">Keluar daripada sistem</button>
            </div>
    
            <router-link :to="{name:'registration'}">
                <button id="registration" v-if="!IS_REGISTERED">Pendaftaran</button>
            </router-link>
        </div>
    </header>
</template>


<skrip>
    kaedah: {
        ...mapActions(["keluar"]),
        exitFromSystem() {
            this.exit() // Lihat dalam Vuex
        },
    },
</script>

 Di manakah tempat terbaik untuk menggunakan localStorage untuk menyimpan IS_REGISTERED semasa memuatkan semula halaman?

Answer 1

Terjemahan: Saya menyelesaikan masalah ini sendiri, // npm-> npm install vuex-persistedstate // OR // yarn-> yarn add vuex-persistedstate

Di kedai saya, ia perlu ditambah seperti ini:

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

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