一看就会的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之一
Apr 27 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
Node.js测试中的Mock文件系统详解
Nov 21 Javascript
微信小程序之事件交互操作实例分析
Dec 03 Javascript
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
JS实现简易图片自动轮播
Oct 16 Javascript
JavaScript实现图片放大预览效果
Nov 02 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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
swfupload 多文件上传实现代码
2008/08/27 PHP
php读取csv实现csv文件下载功能
2013/12/18 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
php中final关键字用法分析
2016/12/07 PHP
Jquery 插件开发笔记整理
2011/01/17 Javascript
采用call方式实现js继承
2014/05/20 Javascript
JavaScript返回0-1之间随机数的方法
2015/04/06 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
2018/07/18 Javascript
JS实现轮播图效果
2020/01/11 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
js实现ajax的用户简单登入功能
2020/06/18 Javascript
python脚本设置系统时间的两种方法
2016/02/21 Python
PyQt5每天必学之工具提示功能
2018/04/19 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
分析python请求数据
2018/08/19 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
平面设计岗位职责
2013/12/14 职场文书
ktv好的活动方案
2014/08/15 职场文书
电影地道战观后感
2015/06/04 职场文书
学历证明样本
2015/06/16 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android