使用vue-router，elementUI，vuex实现的简易登录界面

实现思路

将可以登录的用户名以及密码保存到sessionStorage中，用户输入之后取出比对，如果验证成功可以跳转到信息页面实现修改操作

将用户信息保存到sessionStorage中，作为数据库

let storage = sessionStorage;//获取
 let userList = [
    {username:'lily',password:'lily'},
    {username:'alan',password:'alan'},
    {username:'jack',password:'jack'}
];
//存入，只可以存字符串，需要转换
storage.setItem('userList',JSON.stringify(userList));

创建store.js，state与mutations如下

state: {
        loginStatus: 0,//登录状态
        username: '',//用户名
        password: '',//密码
        errorMsg:'',//错误提示
    },
mutations: {
		//更新用户名
        updateUsername(state,data){
            state.username = data;
        },
        //更新密码
        updatePassword(state,data){
            state.password = data;
        },
        //更新错误信息
        updateErrorMsg(state,errorCode){
            if(errorCode===1){
                state.errorMsg = "请输入用户名或密码"
            }else if(errorCode===2){
                state.errorMsg = "用户名或密码错误"
            }else{
                state.errorMsg = '';
            }
        },
        //登录
        loginIn(state){
            state.loginStatus = 1;
        },
        //注销
        loginOut(state){
            state.loginStatus = 0;
        }

导出的Login.vue

export default {
    name: 'Login',
    data() {
        return {
            usernameInput: '',//绑定elementUI中的input框，实现输入
            passwordInput: ''
        } 
    },
    computed: {
        username() {
        	//得到store中的username
            return this.$store.state.username;
        },
        password() {
            return this.$store.state.password;
        },
        //两种方法获取，这是第二种，需要引入mapState
        ...mapState({errorMsg: state=>state.errorMsg,loginStatus: state=>state.loginStatus})
    },
    methods: {
        changeUsername(value) {
            this.$store.commit("updateUsername",value);
        },
        changePassword(value) {
            this.$store.commit("updatePassword",value);
        },
        //登录
        loginIn(){
        	//取出进行比对
            let db = JSON.parse(storage.getItem('userList'))
            window.console.log('login in',this.password)
            db.forEach(item => {
                if(this.username==item.username && this.password == item.password){
                    this.$store.commit("loginIn")
                    this.$store.commit('updateErrorMsg',0)
                    //传入用户名到跳转到新页面
                    this.$router.push({name:'test',params:{username:this.username,password:this.password}});
                    //用户名或密码为空
                }else if(!this.username||!this.password){
                    window.console.log(this.username,this.password)
                    this.$store.commit('updateErrorMsg',1)
                }else{
                	//用户名或密码不正确
                    this.$store.commit('updateErrorMsg',2)
                }
            });
        },
    }
}

input框输入->触发@change事件
->$store.commit(‘updateUsername’)，调用mutations中的方法，改变username，实现双向绑定数据

Login.vue中的html部分

<div class="login">
        <p v-if="loginStatus">您已经登录p>
        <div v-else class="input">
            <el-input placeholder="用户名" @change="changeUsername"
            v-model="usernameInput"
            clearable>
            el-input>
            <div class="line">div>
            <el-input placeholder="密码" @change="changePassword"
            v-model="passwordInput"
            show-password>
            el-input>
            <br />
            <el-button type="primary" @click="loginIn">登录el-button>
            <el-alert
                v-if="errorMsg"
                :title="errorMsg"
                type="error"
                effect="dark"
                show-icon
                :closable="false">
            el-alert>
        div>
    div>

Test.vue代码

<template>
    <div class="test">
        <el-card class="box-card">
            <div slot="header" class="clearfix header">
                <span>详细信息span>
                <el-button type="warning" @click="loginOut" style="float: right; padding: 8px 20px; margin-left: 5px">注销el-button>
                <el-button type="primary" style="float: right; padding: 8px 0px;">
                    <router-link :to="{name: 'detail',params: {username: userInfo.username}}" style="color: #fff">修改信息router-link>
                el-button>
            div>
            <div class="text item">
                username:{{userInfo.username}}              
            div>
            <div class="text item">
                password:{{userInfo.password}}              
            div>
        el-card>
        <router-view>router-view>
    div>
template>
<script>
    import store from '../store/store'

    export default {
        name: 'Test',
        data() {},
        beforeRouteEnter(to, from, next){
        	//判断是否登录
            if(store.state.loginStatus){
                next()
            }else{
                next('/login');
            }
        },
        computed: {
        	//用户信息获取
            userInfo() {
                return {
                    username:store.state.username,
                    password:store.state.password
                }
            },
        },
        methods: {
        	//注销
            loginOut() {
            	//调用store中的方法
                this.$store.commit("loginOut");
                this.$router.push('/login');
                //注销之后清空store中的用户信息
                this.$store.commit("updateUsername",'');
                this.$store.commit("updatePassword",'')
            }
        }
    }
script>

修改用户信息页面，单行表单

<el-form :inline="true" class="demo-form-inline">
        <el-form-item label="用户名：">
            <el-input v-model="newUsername" placeholder="用户名">el-input>
        el-form-item>
        <el-form-item>
            <el-button type="primary" @click="changeDetail('username')">修改el-button>
        el-form-item>
        <el-form-item label="密码：">
            <el-input v-model="newPassword" placeholder="密码">el-input>
        el-form-item>
        <el-form-item>
            <el-button type="primary" @click="changeDetail('password')">修改el-button>
        el-form-item>
        el-form>
<script>

let storage = sessionStorage;
export default {
    data() {
        return {
        	//新修改的用户名与密码
            newUsername: '',
            newPassword: ''
        }
    },
    created() {
        this.newUsername = this.username;
        this.newPassword = this.password;
    },
    computed: {
        username() {return this.$store.state.username},
        password() {return this.$store.state.password}
    },
    methods: {
        changeDetail(type) {
        	//取出进行修改
            var db = JSON.parse(storage.getItem('userList'));
            db.forEach(item => {
                if(item.username===this.username){
                    if(type==='username'){
                        item[type] = this.newUsername;
this.$store.commit("updateUsername",this.newUsername);
                    }else{
                        item[type] = this.newPassword;
this.$store.commit("updatePassword",this.newPassword);
                    }
                }
            });
            //设置，名字相同就可以替换
            storage.setItem('userList',JSON.stringify(db));
        }
    }
}
script>

总结，展示效果

初学vuex，主要是熟练了一下过程。