在Vue中使用localStorage。在哪里需要使用它?
P粉122932466
2023-08-03 18:43:43
<p>我想使用localStorage,这样当页面重新加载时,数据能够保存下来。<br /><br />我使用Vuex来追踪一个人是否已注册。并且希望当页面加载时,这个人已经注册。<br /><br />我的Vuex代码如下:</p><p><br /></p>
<pre class="brush:php;toolbar:false;">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
}
}
}</pre>
<p>我的Vue.js中的链接</p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p> 在重新加载页面时,最好在哪里使用localStorage来保存IS_REGISTERED?</p><p><br /></p>
Translation: 我自己解决了这个问题,// npm-> npm install vuex-persistedstate // OR // yarn-> yarn add vuex-persistedstate
在我的store中,需要像这样添加: