在Vue中使用localStorage。在哪里需要使用它?
P粉122932466
P粉122932466 2023-08-03 18:43:43
[Vue.js讨论组]

我想使用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?


P粉122932466
P粉122932466

全部回复(1)
P粉680000555

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()]
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号