博客

使用场景：通过组件userLogin.vue读取到后端的用户信息，使用mapMutations存储到vuex中，随后通过my.vue页面使用mapState展示用户信息相关数据。

首先，vuex采用modules模块化开发，便于维护：

// src > store > index.js >

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

Vue.use(Vuex);

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


// src > store > modules > user.js >

export default {
    state: {
        list: 123,
        //登录状态
        loginStatus: false,
        //token
        token: null,
        //从后端返回的用户信息：用户头像|用户昵称等
        userInfo: {

        }
    },
    getters: {

    },
    mutations: {
        //登录成功后 将用户信息存储到vuex 之后就可以去别的组件读取了
        user_login(state, user) {
            state.loginStatus = true;
            state.token = user.token;
            state.userInfo = user
            //持久化存储 ==》 本地存储 把user对象存进去
            localStorage.setItem('teaUserInfo', JSON.stringify(user))
        },
        //本地持久化读取 =》app.vue
        init_user(state) {
            let userInfo = JSON.parse(localStorage.getItem('teaUserInfo'))
            if (userInfo) {
                state.loginStatus = true;
                state.token = userInfo.token;
                state.userInfo = userInfo
            }
        },
        //退出登录
        log_out(state) {
            state.loginStatus = false;
            state.token = null;
            state.userInfo = {};
            localStorage.removeItem('teaUserInfo')
        }
    },
    actions: {

    }
}

userLogin.vue页面读取到后端返回的用户信息，my.vue页面展示相关数据

// 登录页 UserLogin.vue >

import http from "@/common/api/request.js";
import { mapMutations } from "vuex";

methods: {
    ...mapMutations(["user_login"]),
    //密码登录
    login() {
      //...
      //发送请求，后端验证
      http
        .$axios({
          url: "/api/login",
          method: "POST",
          data: {
            userTel: this.userTel,
            userPwd: this.userPwd,
          },
        })
        .then((res) => {
          //提示信息
          Toast(res.msg);
          //登录失败 就终止
          if (!res.success) return;
          //****登录成功 =》跳转页面 存储用户信息
          //将data用户信息对象存到vuex
          this.user_login(res.data);
          //跳转到我的页面中
          this.$router.push("/my");
        });
    }
  },

// 个人中心 My.vue >

<header>
      <!-- 登录状态时 显示以下-->
      <div v-if="loginStatus" class="user-info">
        <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="log_out">退出登录</li>
      </ul>
</section>

import { mapState } from "vuex";
import { mapMutations } from "vuex";

// 刷新后依然可见用户信息 App.vue >

created() {
    this.$store.commit("init_user");
  },

 computed: {
    ...mapState({
      loginStatus: (state) => state.user.loginStatus,
      userInfo: (state) => state.user.userInfo,
    }),
  },

 methods: {
    //退出登录
    ...mapMutations(["log_out"]),
    //跳到登录页
    goLogin() {
      this.$router.push("/login");
    },
  },