一看就会的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 chili图片远处放大插件
Nov 30 Javascript
用js实现in_array的方法
Nov 05 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
JS实现标签页切换效果
May 04 Javascript
JavaScrpt中如何使用 cookie 设置查看与删除功能
Jul 09 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
基于vue.js实现购物车
Jan 15 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
使用Apache的rewrite技术
2006/06/22 PHP
对盗链说再见...
2006/10/09 PHP
PHP中将网页导出为Word文档的代码
2012/05/25 PHP
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
详解PHP归并排序的实现
2016/10/18 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
最棒的Angular2表格控件
2016/08/10 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
vue+echarts实现动态折线图的方法与注意
2020/09/01 Javascript
python 提取文件的小程序
2009/07/29 Python
Python3解决棋盘覆盖问题的方法示例
2017/12/07 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
TensorFlow 合并/连接数组的方法
2018/07/27 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
曼城官方网上商店:Manchester City
2019/09/10 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
大专毕业生自我评价分享
2013/11/10 职场文书
党员自我评价分享
2013/12/13 职场文书
绩效工资分配方案
2014/01/18 职场文书
教师专业自荐书范文
2014/02/10 职场文书
上班看电影检讨书
2014/02/12 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技