Vue用戶名vuex和localStorage雙向存儲

  今天我們要說的問題就是在使用vue進行開發的過程中登錄時使用vuex進行存儲用戶的時候,不刷新頁面的時候,是可以看到用戶名的,但是刷新頁面后使用vuex存儲的用戶名不見了 

  先看一下自己隨手寫的例子=>沒有刷新之前:

   

   刷新之后

　

    可以看到原本存儲的用戶名刷新之后消失了,這個時候我們應該去進行思考一個問題:如何才能夠刷新之后用戶名依然存在頁面上?

　 下面我們來看使用localStorage存儲之后的用戶名=>刷新之后

　  

      可以看到頁面刷新之后存儲的用戶名還存在頁面上,下面我們來看一看代碼

      我們肯定是要在登錄成功的時候往vuex中存儲一個用戶名,在往localStorage存儲的同時往localStorage存儲一個數據,代碼:

　　

import {mapActions} from 'vuex'
export default {
      data(){
          return{
          username:'',
           pwd:'',
          }        
      },
      methods:{
         islogin(){
          let obj={
            username:this.username,
            pwd:this.pwd
          }
          let res=await getUsers(obj)
            this.$message({
              message:res.data.message,
              type: 'success'
            });    
            localStorage.setItem('username',this.username)
            this.getname(this.username)
        } 
      }
}        

   這是登錄頁面中的代碼

　

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    userName:''
  },
  mutations: {
    setname(state,name){
      state.userName=name
    }
  },
  actions: {
    getname({commit},name){
      commit('setname',name)
    }
  },
})

這是vux中的代碼

我們這個時候就已經將用戶名分別存儲在了vuex和localStorage中我們看一下localStorage中存不存在我們存儲的數據

我們可以看到localStorage中已經存在了我們存儲的數據

下面是獲取數據的代碼

import {mapState} from 'vuex'
export default {
  data(){
    return{
      circleUrl:'',
      users:''
    }
  },
  computed:{
    ...mapState({
      user:state=>state.userName,
      imageUrl:state=>state.imgUrl
    })
  },
  created(){
    this.users=localStorage.getItem('username'),
    this.circleUrl=localStorage.getItem('imgurl')
  }
}

我們現在已經取到了自己存儲的數據然后我們使用三目運算符來渲染到頁面中,有可能會有小伙伴們會問為什么要使用三目運算符呢?

因為我們使用vuex獲取的數據一刷新頁面就會消失,所以我們需要進行判斷如果兩個值其中一個為空的話就渲染另一個,這個時候無非使用三目元算符是最合適的,最方便的,當然有其他好的方法的也可以使用自己自認為好的方法,下面我們來看一看寫法

<div class="lef">{{user==''?users:user}}</div>
<div class="block"><el-avatar :size="45" :src="imageUrl==''circleUrl:imageUrl"></el-avatar></div>

這樣就可以實現刷新頁面自己存儲的用戶名也會存在頁面上了,如果有更好的方法,希望可以分享一下心得,共同進步。