Vue中的localStorage,哪里需要使用?

b5lpy0ml  于 2023-08-07  发布在  Vue.js
关注(0)|答案(1)|浏览(120)

我想使用localStorage,以便在重新加载页面时保存数据
我用vuex跟踪人是不是注册。并且要在页面加载时,人被注册
我的Vuex:

export default {
    state:{
        isRegistered:false
    },
    actions:{
        registrate({commit}) {
            commit("login")
        },
        exit({commit}) {
            commit("logout")
        }
    },
    mutations:{
        login(state) {
            state.isRegistered=true;
        },
        logout(state) {
            state.isRegistered=false
        }
    },
    getters:{
        IS_REGISTERED(state){
            return state.isRegistered
        }
    }
}

字符串
我在Vue.js中的链接

<template>
    <header class="hat">
        <div class="header__buttons">
          
    
            <div v-if="IS_REGISTERED" id="exit--tittle">
                <button @click="exitFromSystem">Exit from system</button>
            </div>
    
            <router-link :to="{name:'registration'}">
                <button id="registration" v-if="!IS_REGISTERED">Registration</button>
            </router-link>
        </div>
    </header>
</template>

<script>
    methods: {
        ...mapActions(["exit"]),
        exitFromSystem() { 
            this.exit() // Look in Vuex
        },  
    },
</script>


问题本身:
在哪里使用localStorage将IS_REGISTERED保存在重新加载页面上最好?

tp5buhyn

tp5buhyn1#

我自己修复的,// npm-> npm install vuex-persistedstate //或者// yarn-> yarn add vuex-persistedstate
在我的商店,有必要添加这样的:

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

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

字符串

相关问题