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>

这样就可以实现刷新页面自己存储的用户名也会存在页面上了,如果有更好的方法,希望可以分享一下心得,共同进步。