6-5使用vuex保存登录信息

首先store中的index.js：

import { createStore } from 'vuex'

export default createStore({
  
      //获取实体类属性
      state: {
        //全局变量
        member:{}
      },
      //格式转换
      getters: {
      },
      //值的修改
      mutations: {
        //set设置值
        //_member带表外部传入的值
        setMember(state,_member){
          state.member = _member
        }
      },
      //异步任务
      actions: {
      },
        //模块化
      modules: {
    }
  
})

login中加入：

import store from "@/store";
store.commit("setMember",data.content)

<script>
import store from "@/store";
store.commit("setMember",data.content)

const login = () => {
  axios.post("/member/member/login", loginForm).then(response => {
    // response.data= 后端的CommonResp
    let data = response.data;
    if (data.success) {
      notification.success({description: '登陆成功！'});
      //登录成功跳转控台主页
      router.push("/")
      store.commit("setMember",data.content)
      // console.log("登录成功：", data.content);
    } else {
      notification.error({description: data.message});
    }
  });
}

</script>

the-header.vue添加 ：

<div style="float: right; color: white;">
  您好：{{member.mobile}} &nbsp;&nbsp;
  <router-link to="/login" style="color: white" >
    退出登录
  </router-link>
</div>