如何使用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> 这个组件就会被渲染
那么用户就看到了登录组件
《完》

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2018-04-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏格子的个人博客

Tomcat目录文件列表功能和定制化

先说一下背景。 某天,产品小伙伴过来提了一个需求:能不能把公司的需求文档以列表的方式展示出来,当开发者需要哪个的时候,自己在目录中寻找并点击进入(需要哪个点哪...

2643
来自专栏耕耘实录

使用awk命令批量删除指定范围的账号

版权声明:本文为耕耘实录原创文章,各大自媒体平台同步更新。欢迎转载,转载请注明出处,谢谢

763
来自专栏数据和云

5分钟速成Oracle 12.2 RAC 专家(附ppt下载)

Oracle 12c 在RAC方面提出了很多新的解决方案和特性。这些方案和特性使得Oracle 集群在云和大数据的时代环境下,帮助企业用户上云更具优势。今天我们...

3895
来自专栏魏艾斯博客www.vpsss.net

网站目录/绝对路径/相对路径-零基础搭建wordpress教程

网站基本知识包括很多方面,网站结构、网页路径、域名、服务器、建站等等,我们已经写过域名和新手如何选择服务器了,正好最近遇到群友对网站基本知识有些疑问,魏艾斯博客...

3091
来自专栏java一日一条

9 个使用前必须再三小心的 Linux 命令

Linux Shell/terminal 命令非常强大,即使一个简单的命令就可能导致文件夹、文件或者路径文件夹等被删除。

681
来自专栏娱乐心理测试

微信小程序发送模版消息(事例)

4087
来自专栏CodeSheep的技术分享

为Hexo博客添加LiveRe评论系统

1803
来自专栏Hadoop和Spark

用AWS部署一个无服务架构的个人网站

在这篇文章里我想介绍下怎样利用AWS(hjlouyoujuqi360com)部署一个无服务架构的个人网站。这个个人网站将具备以下特点:

2664
来自专栏即时通讯技术

SSE技术详解:一种全新的HTML5服务器推送事件技术

一般来说,Web端即时通讯技术因受限于浏览器的设计限制,一直以来实现起来并不容易,主流的Web端即时通讯方案大致有4种:传统Ajax短轮询、Comet技术、We...

1414
来自专栏24K纯开源

QT程序在发布的时候应注意的地方

---恢复内容开始---     我们用QT开发好的应用程序,如果要发布到其他计算机上运行怎么办呢?我们在用VC编程时,单独运行编译好的可执行文件时,经常会发现...

2515

扫码关注云+社区