如何使用vue开发一个登录注册组件

本文作者：端，映客的一位前端开发。

要开发某个功能我们就要去思考这个功能怎样实现最快捷最方便，下面以项目中的登录注册组件为例说明

一个功能要尽可能的去拆分比如这个登录注册组件就可以拆分成三个部分

一：登录

二 ：注册

三：其他（example:找回密码）

组件好写 这里就不在去写了 （组件就是可以重复利用的片段）

这里我先梳理思路

我们要写一个全局方法 可以控制哪个组件显示 类似于这样this.setLogShow(n)

里面可以是Blooean 或者Number 比如登陆组件要显示 可以传入Number 1 ,注册组件为2 等

下面我们来完善自己的仓库(log.js)

为了能让你学到更多东西我采用手动写代码方式

首先要明白下面四点

第一：vue是数据驱动 数据改变会会更新视图 我们需要有一个初始状态值 state;

第二： vue中的数据是加了钩子的 不管是get 或者set 都会触发钩子 getter是在显示数据之前进行的在编辑;

第三：数据状态的改变只能通过Mutations 同步修改状态;

第四：Actions 异步修改状态 且只能提交到Mutations;

理解了上面四点我们开始构建我们的logIn仓库

一下代码均按照所在公司要求编写

首先我们需要定义项目存在的事件

mutation-type.js

设置登录状态

export const SET_LOGREG_SHOW = 'SET_LOGREG_SHOW'

接着在编写一个状态仓库(logreg.js)

import * as types from '../mutations-types'(不理解import as的自行看es6模块章节)
const state ={
show: false //1:登录 2：注册 3：找回密码
}
const getters = {
getLogregShow: state=> state.show
}
const mutations = {
[types.SET_ISLOGREGSHOW] (state,show){
state.show = show
}
}
const actions = {
setLogregShow({commit},show）{
commit(types.SET_ISLOGREGSHOW，show)
}
}
export default {
state,
getters,
mutations,
actions
}

注意

关于上面代码一些命名(比如getters下面的getLogregShow,以及actions下面的setLogregShow,),这个命名完全看个人爱好,我觉得这样写能更好的让人理解get是获取XXX,set是设置XXX.

接下来不用我说大家应该也知道要在store中导入这个仓库 ,并且在根组件注册仓库才能全局使用

 import Vue from 'vue'
import Vuex from 'vuex'
import logreg from './modules/logreg.js'
Vue.use(Vuex)
export default new Vuex.Store({
modules:{
logreg
}
})

然后你的三个组件都写好了 那么接下来就要控制渲染哪个组件了

比如你的三个组件分别为signUp.vue signIn.vue retrieve.vue

既然是渲染那么我们知道可以用v-if 自行看v-if与v-show的区别

我们可以做一个新的组件就叫做signComp.vue 是这三个组件的父组件

<template>
<div>
<sign-in v-if="show===1"></sign-in>
<sign-up  v-else-if="show===2"></sign-up>
<retrieve v-else-if="show===3"></retrieve>
</div>
</template>
<script>
import signIn from 
import signUp from 
import retrieve from 
components:{
signIn,signUp,retrieve
}
</script>

这样你在其他调用的时候只需要两部 映射方法 调用方法

第一：

mapActions({
showLogreg:'setLogregShow'
})

比如点击了登录那么 可以用

this.showLogreg(1)

就会弹出你的登录组件

注意

新组建里面的show 也是通过getters映射到当前组件的

 computed: {
    ...mapGetters({
      show: 'getLogregShow'
    })
},

为什么会弹出呢 很简单 流程如下

调用showLogreg(1)=========》找到对应仓库的方法，找到setLogregShow() ====>由于调用的时候传入了1 那么就相当于提交到mutations一个新的状态值, mutations收到这个提交会做一件事情 会把state下面对应的数据改变 （把show变为1）

当show为1的时候 <sign-in v-if="show===1"></sign-in> 这个组件就会被渲染

那么用户就看到了登录组件

《完》