在vue中使用vuex和sessionStorage保存用户名

安装 vuex

npm install vuex --save

vuex安装完成之后，构建如下目录：

main.js文件下注册：

//实例化 store
import store from './vuex/store.js'

new Vue({
  el: '#app',
  store,   //实例化 store
  router,
  components: { App },
  template: '<App/>'
});

vuex中几个文件详情如下：

store.js

在store.js中目前保存一个数据，就是当前用户的名字

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as  mutations from './mutations'
import * as actions from './actions'

Vue.use(Vuex);

export default new Vuex.Store({
//const store = new Vuex.Store({
  //定义状态
 state:{
   currentUser:null,   //当前用户
  // isLogin:false    //判断当前用户是否已经登录
 },
  getters,
  mutations,
  actions
});

//export default store

getters.js

export const currentUser = state=> state.currentUser
//export const isLogin = state=> state.isLogin

mutations.js

//更改用户状态信息
export const userStatus=(state,user)=>{
  if (user){
    state.currentUser = user
//    state.isLogin = true
  }else if(user==null){
    //退出的时候清空sessionStorage里的东西
    sessionStorage.setItem('userName',null);
  //  sessionStorage.setItem('userToke','');
    state.currentUser = null;
  //  state.isLogin = false;
  }
}

actions.js

//应用mutation
export const setUser = ({commit},user) =>{
  commit('userStatus',user)
}

在用户登录的时候，我们就需要将用户名存放入sessionStorge，再由sessionStorage传入vuex中。

  this.$ajax.post(meadiaurl.url+'/FH_AM6/api/login/toLogin',
              this.$qs.stringify({
                USERNAME:this.name,
                PASSWORD:this.password
              })
       )
         .then((res)=>{
           let code = res.data.code
           if(code==200){
             this.$Message.success('登录成功');
             this.$router.push("/main/recommend/webmedia");
             //将用户名放入sessionStorage
             sessionStorage.setItem('userName',this.name);
             //将用户名放入vuex
            this.$store.dispatch('setUser',this.name);
           }else {
             this.$Message.error('账号或密码不正确');
           }
         }).catch(()=>{
         this.$Message.error('获取失败');
       })

在你需要显示的用户名中输出：

this.$store.state.currentUser

        <div>
          <h4>{{this.$store.state.currentUser}}</h4>
        </div>

每当刷新页面的时候，就会从sessionStorage中查询是否有userName的存在,如果没有则跳向登录页面

    methods:{
        isLogo() {
          if (sessionStorage.getItem('userName')) {
            this.$store.commit('userStatus',sessionStorage.getItem('userName'))
          }else{
            this.$router.push("/logo");
          }
        }
      }

以上是本章全部内容