vuex实现用户登录和退出功能

使用vuex获取用户信息，在每个页面就可以直接使用。vuex介绍参考：

Vuex和Vuex数据持久化储存 juejin.cn/post/709279…

Vuex中getters和4个map方法的使用 juejin.cn/post/709315…

Vuex模块化 juejin.cn/post/709382…

主要实现步骤：

1.在src目录下建立store目录，配置文件。
2.在store目录下建立userInfo目录，调用用户信息接口。
3.store引入userInfo模块。
4.页面获取用户信息。

userInfo/index.js

import API from '@/scripts/index.js';

// 状态
const state = {
    userInfo: {}
};

// mutations
const mutations = {
    // 用户登录
    GETUSERINFO(state, value) {
        if (value) {
            // 返回用户信息，可封装常用的用户信息和处理用户信息。
            state.userInfo = value;
        } else {
            state.userInfo = {};
        }
    },
    // 用户退出
    LOGINOUT(state, loginOutUrl) {
        sessionStorage.removeItem('token');
        window.location.href = loginOutUrl;
    }
};

// actions
const actions = {
    // 用户登录
    getUserInfo(context, value) {
        API.getUserInfo().then((res) => {
            context.commit('GETUSERINFO', res.data.data);
        });
    },
    // 用户退出
    loginOut(context, value) {
        API.getLoginOut().then((res) => {
            context.commit('LOGINOUT', res.data.data);
        });
    }
};

// getter
const getters = {};

export default { state, mutations, actions, getters };

store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import userInfoStore from './userInfo/index.js';

Vue.use(Vuex);

export default new Vuex.Store({
    modules:{
        userInfoStore
    }
});

页面使用：

用户登录一般是在Home文件中使用，打开页面时就会调用用户信息接口。

用户退出是当用户点击退出按钮时调用接口。

<template>
    <div>
        <head-nav></head-nav>
        <!-- 因为在路由里面，其他路由是home的children，所以需要加router-view，显示二级路由。 -->
        <router-view></router-view>
    </div>
</template>

<script>
import HeadNav from '@/components/HeadNav';
import { mapActions } from 'vuex';

export default {
    components: { HeadNav },
    mounted(){
        this.getUserInfo();
    },
    data() {
        return {
            message: '首页'
        };
    },
    methods: {
        ...mapActions(['getUserInfo'])
    }
};
</script>

<style lang="less"></style>