26.存储用户信息和退出登录

vuex新建

index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import user from "./modules/user";
export default new Vuex.Store({
  modules: {
    user,
  },
});

 mutations-types.js

export const USER_LOGINS = "USER_LOGINS";
export const INIT_USER = "INIT_USER";

user.js

 

import { USER_LOGINS, INIT_USER } from "./mutations-types";
export default {
  state: {
    list: 123,
    //登录的状态
    loginStatus: false,
    //token
    token: null,
    //用户信息;用户的头像  |  用户昵称
    userInfo: {},
  },
  getters: {},
  mutations: {
    //设置
    [USER_LOGINS](state, user) {
      //   alert(1111);
      state.loginStatus = true;
      state.token = user.token;
      state.userInfo = user;
      // console.log(state, user);
      //持久化存储=》  本地存储
      localStorage.setItem("teaUserInfo", JSON.stringify(user));
    },
    // 读取
    [INIT_USER](state) {
      let userInfo = JSON.parse(localStorage.getItem("teaUserInfo"));
      if (userInfo) {
        state.loginStatus = true;
        state.token = userInfo.token;
        state.userInfo = userInfo;
      }
    },
    //退出登录
    loginOut(state) {
      state.loginStatus = false;
      state.token = null;
      state.userInfo = {};
      localStorage.removeItem("teaUserInfo");
    },
  },
  actions: {},
};

 app.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>



<script>
export default {
  created() {
    this.$store.commit("INIT_USER");
  },
};
</script>

<style>
</style>

 userLogin.vue

import { mapMutations } from "vuex";
import http from "@/common/api/request.js";
export default {
  data() {
    return {
      userTel: "", //用户输入的手机号
      userPwd: "", //用户输入的密码
      // 验证规则
      rules: {
        //手机号验证
        userTel: {
          rule: /^1[23456879]\d{9}$/,
          msg: "手机号不能为空,并且为11位",
        },
        //密码的验证规则
        userPwd: {
          rule: /^\w{6,12}$/,
          msg: "密码不能为空,并且6-12位",
        },
      },
    };
  },
  methods: {
    ...mapMutations(["USER_LOGINS"]),
    goLogin() {
      this.$router.push("/Login");
    },

 

  .then((res) => {
          // console.log(res);
          //提示信息
          Toast(res.msg);
          //登录失败
          if (!res.success) return;
          //登录成功-->跳转页面，存储用户信息
          // console.log(res.data);
          this.USER_LOGINS(res.data);

          // 跳转到我的页面中
          this.$router.push("/my");
        });

 my.vue

<template>
  <div class="my">
    <header>
      <div class="user" v-if="loginStatus">
        <img :src="userInfo.imgUrl" alt="" />
        <span>{{ userInfo.nickName }}</span>
      </div>
      <div v-else class="login" @click="goLogin">登陆/注册</div>
    </header>
    <section>
      <ul>
        <li>地址管理</li>
        <li v-if="loginStatus" @click="loginOut">退出登录</li>
      </ul>
    </section>
    <Tabbar />
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
import Tabbar from "../components/common/Tabbar.vue";
export default {
  name: "My",
  components: {
    Tabbar,
  },
  computed: {
    ...mapState({
      loginStatus: (state) => state.user.loginStatus,
      userInfo: (state) => state.user.userInfo,
    }),
  },
  methods: {
    ...mapMutations(["loginOut"]),
    goLogin() {
      this.$router.push("/login");
    },
    // //退出登录
    // loginOut(){
    //   localStorage.clear
    // }
  },
};
</script>

<style scoped lang="less">
.my {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-color: green;
  width: 100%;
  height: 5.4667rem;
  .user {
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
    }
    span {
      font-size: 0.5333rem;
      padding-top: 0.4rem;
      color: #fff;
    }
  }

  .login {
    font-size: 0.5867rem;
    padding: 0.4rem;
    background-color: rgb(66, 28, 6);
    color: #fff;
    border: 1px solid #fff;
    border-radius: 0.32rem;
  }
}
section {
  flex: 1;
  overflow: hidden;
  ul li {
    padding: 0.4rem;
    font-size: 0.42666rem;
  }
}
</style>

页面效果