vuex+localSrorage+vue-router写一个简易的注册登录页面

先看一下效果吧

 

用的是localStorage来保存的username。

在这里说一下关键的代码吧，因为使用的是模块化组件式开发，所以如果贴代码的实在是太多了。

大致的思路就是：注册的时候，通过localStorage将username保存到本地存储，在登录的时候获取登录表单的值，并与本地存储的username检测是否相等，相等的话即登陆成功，不相等的话显示用户名没有注册。

首先你要对localStorage最基本的创建和读取有一定的了解,localStorage的创建有三种方式

localStorage.setItem('a',1)
localStorage.a = 1 
localStorage['a'] = 1

相应的，localStorage读取也有三种方式

console.log(localStorage.a)
console.log(localStorage['a'])
console.log(localStorage.getItem('a'))

写一下主页

    //home组件的路由  
  <router-link to="home">Home</router-link>
	
    //登录和注册组件的路由，在vuex中设置了一个判断用户登录状态的flag，初始化为false

	<template v-if="!this.$store.state.flag">
		<router-link to="register">Register</router-link>
		<router-link to="login">Login</router-link>
	</template>
	<template v-else>
		<div>
			<h2>欢迎你
                    <span style="text-decoration: underline; color: red;">
                        {{this.$store.state.username}}
                    </span>
            </h2>
		</div>
	</template>
		
	//路由渲染区域
    <router-view></router-view>

页面没有什么可以说的，简简单单三个路由就好。

 

然后是注册

<template>
	<div class="register">
		<input type="text" v-model.trim="username" @keyup.enter="register" placeholder="请输入你的昵称">
		<button @click="register">注册</button>
	</div> 
</template>

<script>
    data () {
			return {
				username:''
			}
		},
		methods: {
			register () {
				this.$store.commit('getUserInfo',{
					name:this.username
				})
				alert('注册成功， 去登录吧！')
			} 	
		}
</script>

注册按钮点击后就通过vuex的mutation来改变初始值并保存。

vuex.store

const store = new Vuex.Store({
	state:{
		username:''|| localStorage.username,
		flag:false,
	},
	getters:{
		
	},
	
	mutations:{
		getUserInfo(state,user){
			state.username =user.name
			localStorage.setItem('username',state.username)
		},
		hiddenMenu(state){
			state.flag = true
		}
	}
})
export default store

关键的部分就是对获取到的username进行localStorage进行本地存储，mutations里面可以传两个参数，第一个是包含状态的state,第二个是修改状态的值，一般来说是一个对象，更方便的去管理，更易读。

登录

methods:{
			login () {
				if(window.localStorage){
					var storage = window.localStorage 
					
					if(this.user == storage.getItem('username')){
						alert('登陆成功!')
						this.$store.commit('hiddenMenu')
						this.$router.push({
							path:'home'
						})
					}else{
					alert('用户名未注册，请先去注册')
					}
				}
			},
			toReg(){
				this.$router.push({
					path:'register'
				})
			}
		}

判断如果相等就成功。关键就是这些代码啦！如果有不对的地方，还请大佬们多多指点批评！