一看就会的vuex实现登录验证(附案例)


Posted in Javascript onJanuary 09, 2020

一、vuex是啥?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

简单来说,Vuex 类似 Redux 的状态管理器,用来管理Vue的所有组件状态。

当你打算开发大型单页应用(SPA),会出现多个视图组件依赖同一个状态,来自不同视图的行为需要变更同一个状态。

遇到以上情况时候,你就应该考虑使用Vuex了,它能把组件的共享状态抽取出来,当做一个全局单例模式进行管理。这样不管你在何处改变状态,都会通知使用该状态的组件做出相应修改。

vuex大体分为如下几部分:

  • state 用来数据共享数据存储
  • mutation 用来注册改变数据状态
  • getters 用来对共享数据进行过滤操作
  • action 解决异步改变共享数据
  • modules:store的子模块,为了开发大型项目,方便状态管理而使用的

二、vuex使用

1.首先创建一个vue-cli项目,这里不详述。

vue init webpack mylogin

2.安装vuex:

npm install vuex --save

3.在src目录下新建文件夹store,用来存放vuex内容

目录结构如下:

一看就会的vuex实现登录验证(附案例)

4.在main.js中引入vuex

import Vuex from 'vuex'
import store from './store'
Vue.use(Vuex)

一看就会的vuex实现登录验证(附案例)

5.在store文件夹下新建state.js,vuex用来存储数据
内容如下:

const state={
 userInfo:''
}
export default state;

userInfo用来保存用户信息,根据是否有值来判断跳转页面。

6.在store文件夹下新建multation.js,用来修改vuex中存储的数据
内容如下:

const mutations={
 login(state,v){
  state.userInfo=v;
 }
}
export default mutations;

7.在store文件夹下新建index.js,用来初始化vuex
内容如下:

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './multation'

Vue.use(Vuex);
const store =new Vuex.Store({
 state,
 mutations
})
export default store;

此时在浏览器中就可以看到如下(浏览器需增加插件vue devTools):

一看就会的vuex实现登录验证(附案例)

8.本项目界面如下

主页面和登陆页面

一看就会的vuex实现登录验证(附案例)

9.login.vue提交方法如下:

submitBtn(){
 let me=this;
 if(!me.user.username||!me.user.pwd){
  alert("用户名或密码不能为空");
 }
 else {
  this.$store.commit('login',this.user);
  this.$router.push('./');
 }
}

通过commit实现执行multations里刚才定义的login方法。即当点击登陆时state中的userInfo已经被赋值。接下来通过判断此字段是否有值来进行页面跳转。

10.在main.js用router.beforeEach方法对vuex中的userInfo进行判断

router.beforeEach(function(to,from,next){
 if(store.state.userInfo||to.path==='/login'){
  next();
 }
 else {
  next({path:'/login'})
 }
})

效果图:

一看就会的vuex实现登录验证(附案例)

登陆后:

一看就会的vuex实现登录验证(附案例)

案例地址:https://github.com/myweiwei/vuex-login

将不断更新完善,期待您的批评指正!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
javascript实现左右控制无缝滚动
Dec 31 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
深入理解js generator数据类型
Aug 16 Javascript
JavaScript获取中英文混合字符串长度的方法示例
Feb 04 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
Websocket 向指定用户发消息的方法
Jan 09 #Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 #Javascript
JS实现商品橱窗特效
Jan 09 #Javascript
微信小程序实现页面浮动导航
Jan 08 #Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 #Javascript
小程序自定义模板实现吸顶功能
Jan 08 #Javascript
微信小程序静默登录的实现代码
Jan 08 #Javascript
You might like
用PHP实现文件上传二法
2006/10/09 PHP
高亮度显示php源代码
2006/10/09 PHP
php中变量及部分适用方法
2008/03/27 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
jQuery+php实现ajax文件即时上传的详解
2013/06/17 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
PHP 读取和编写 XML
2014/11/19 PHP
php微信开发之图片回复功能
2018/06/14 PHP
尝试在让script的type属性等于text/html
2013/01/15 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
谈谈jQuery之Deferred源码剖析
2016/12/19 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
laydate时间日历插件使用方法详解
2018/11/14 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
python 文件操作删除某行的实例
2017/09/04 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
python安装twisted的问题解析
2018/08/21 Python
Django实现学生管理系统
2019/02/26 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
Hammitt官网:设计师手袋
2020/05/23 全球购物
社会实践感言
2014/01/25 职场文书
天地会口号
2014/06/17 职场文书
身份证丢失证明
2015/06/19 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS