Vue学习记录-状态管理
要解决的问题
平时的系统开发中,基本都会碰到这个权限问题,需要根据用户的登录状态进行处理。最常见的情况就是“先登录,后使用”。除去打包成APP,无法看到连接外,如果地址栏里直接输入地址就能绕过登录的话,那就忒不安全了。
方案1:自己做一个状态管理
具体的代码,我删掉了,所以这里只陈述一下过程
1. main.js里面,加一个var user = {didLogin:false},并在methods中添加一个方法changeUserAuth(isLogin){ user.didLogin = isLogin; };
2. main.js里面,添加路由beforeEach,通过判断user.didLogin,进行next()或者next({name:'login});
3. 子页面中如果要修改这个状态的话,通过方法进行修改,this.$root.changeUserAuth(true);
方案2:vuex
正规军的做法,就是vuex了,通过他统一对全局变量进行管理。说一下具体的用法
1. 安装
npm i vuex --save
2. 创建store.js(/ProjectPaht/src/vuex/store.js),并定义types(/ProjectPaht/src/vuex/types.js)
/* store.js */ import Vue from 'vue'
import Vuex from 'vuex' import user from './modules/user' //用户 Vue.use(Vuex) export default new Vuex.Store({
modules: {
user,
}
})
/* types.js */
// 用户权限
export const USER_INFO_UPDATE = 'USER_INFO_UPDATE';
3. 定义各个模块的数据(user.js)
import * as types from '../types' const USER_INFO = 'userInfo'; const state = {
// 用户登录信息
userInfo: JSON.parse(localStorage.getItem(USER_INFO) || '{}'),
} const actions = {
/**
* 用户登录
*/
userLogin({commit}, res) {
localStorage.setItem(USER_INFO, JSON.stringify(res));
commit(types.USER_INFO_UPDATE, res);
}, /**
* 退出登录
*/
userLogout({commit}) {
localStorage.removeItem(USER_INFO);
commit(types.USER_INFO_UPDATE, {});
},
} const getters = {
userInfo: state => state.userInfo,
didLogin: state => state.userInfo.userid.length > 0,
} const mutations = {
[types.USER_INFO_UPDATE](state, res) {
state.userInfo = res
},
} export default {
state,
actions,
getters,
mutations
}
3. 更改store数据
<script>
...
import {mapActions} from 'vuex'; export default {
...
methods: {
...mapActions({
userLogin: 'userLogin', //vues/modules/user.js中定义的方法
userLogout: 'userLogout'
}),
// 登录
onPressLogin: function () {
let param = {
username: this.username,
password: this.password,
}
api.POST('api/account/login', param).then(data=> {
let user = {userid:'wzf'}; //data.data; // 更新state
this.userLogin(user); // 页面跳转
this.$router.push({name: 'home'});
});
}
}
}
</script>
页面跳转以后,就会执行到main.js的路由beforeEach中去了
...
import router from './router'
import store from './vuex/store'
import {mapState} from 'vuex' new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {
App,
},
computed: mapState({
userInfo: ({user}) => user.userInfo, //从user.js中获取信息用于判断是否登录
}),
methods: {
checkAuth: function () {
let {userid = ''} = this.userInfo;
return userid.length > 0; //这里做的比较简单,只是通过userid进行的判断
}
}
}) router.beforeEach((to, from, next) => {
// 如果不是登录页面
if (to.name != 'login') {
if (!router.app.checkAuth()) {
next({name: 'login'});
return;
}
}
next();
});
最后理一下数据流向
1. 页面通过接口调用接口,完成账号验证;
2. 通过vuex修改store,这里具体起作用的是vuex/modules/user.js;
3. 进行页面跳转,会被router.beforeEach拦截,通过对store的判断,具体完成跳转(到登录、到下个页面)
因为之前用了Redux,所以vuex直接就用上了,没有任何难度。关于vuex的具体用法,还是参照一下官方文档吧 https://vuex.vuejs.org/
Vue学习记录-状态管理的更多相关文章
- 【Vue】Vue学习(四)-状态管理中心Vuex的简单使用
一.vuex的简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex背后的基本思想,就是前面所说的单向数据流.图4就是Vuex实现单向数据流的示意图. Store ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- vue项目--vuex状态管理器
本文取之官网和其他文章结合自己的理解用简单化的语言表达.用于自己的笔记记录,也希望能帮到其他小伙伴理解,学习更多的前端知识. Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态 ...
- vue总结 08状态管理vuex
状态管理 类 Flux 状态管理的官方实现 由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管 ...
- 前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...
- vue的store状态管理模式
var store = { debug: true, state: { message: 'Hello!' }, setMessageAction (newValue) { //所有 store 中 ...
- Java设计模式学习记录-状态模式
前言 状态模式是一种行为模式,用于解决系统中复杂的对象状态转换以及各个状态下的封装等问题.状态模式是将一个对象的状态从该对象中分离出来,封装到专门的状态类中,使得对象的状态可以灵活多变.这样在客户端使 ...
- vue学习记录
vue中常用的指令 v-model 双向数据绑定,一般用于表单元素 v-for 对数组或对象进行循环操作,使用的是v-for <!-- 普通循环 --><li v-for=" ...
- 应用四:Vue之VUEX状态管理
(注:本文适用于有一定Vue基础或开发经验的读者,文章就知识点的讲解不一定全面,但却是开发过程中很实用的) 概念:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应 ...
随机推荐
- 【swupdate文档 三】SWUpdate: 嵌入式系统的软件升级
SWUpdate: 嵌入式系统的软件升级 概述 本项目被认为有助于从存储媒体或网络更新嵌入式系统.但是,它应该主要作为一个框架来考虑,在这个框架中可以方便地向应用程序添加更多的协议或安装程序(在SWU ...
- UBIFS学习笔记
在做项目的时候,发现flash芯片有异常现象,经过打印分析,发现是UBIFS方面设置有一些问题,经过查阅一部分资料,最终得到问题的答案. 在解决问题的过程中,发现打印信息比较重要,但网上并没有直接的相 ...
- pyQt: eg3
import sys import urllib2 from PyQt4 import QtCore from PyQt4 import QtGui class Form(QtGui.QDialog) ...
- 查找网页元素对应的js代码
按F12打开调试窗口,切换到Sources选项卡,最右边的Event Listener Breakpoints里勾选Mouse下的mouseover即可,当鼠标移动到图片上时触发mouseover事件 ...
- struct中长度为0的数组用途与原理
前言 在标准C和C++中,长度为0的数组是被禁止使用的.不过在GNUC中,存在一个非常奇怪的用法,那就是长度为0的数组,比如Array[0]; 很多人可能觉得不可思议,长度为0的数组是没有什么意义的, ...
- Adding Completion to (interactive)
Adding Completion to (interactive) Author: Tubo Question: Is there any way to add my own completio ...
- 认识hasLayout——IE浏览器css bug的一大罪恶根源 (转)
认识hasLayout--IE浏览器css bug的一大罪恶根源 转 什么是hasLayout?hasLayout是IE特有的一个属性.很多的ie下的css bug都与其息息相关.在ie中,一个元素要 ...
- 洛谷 P1184高手之在一起 题解
题目传送门 那位高手是谁啊?@jxpxcsh QWQ. 这道题数据特别水,所以直接使用O(n*m),每读进一个m内的字符串,就扫一遍n的字符串.但注意地点字符串中有可能会有空格,所以这时候就要请出g ...
- sharepoint2013搜索
参考http://www.cnblogs.com/jianyus/p/3272692.html 最小权限http://www.cnblogs.com/awpatp/archive/2011/08/16 ...
- NIO-4pipe
import java.io.IOException; import java.nio.ByteBuffer; import java.nio.channels.Pipe; import org.ju ...