vuex 源码分析_前端入门之(vuex-router-sync解析)

前端入门之(vuex-router-sync解析)

发布时间:2018-11-14 13:31,

浏览次数:513

, 标签:

vuex

router

sync

前言:vue全家桶的内容我们已经研究过了vuex、vue-router,有兴趣的童鞋可以去看看我之前的两个系列的文章vuex源码解析一

、vue-router全解析一

,之前结合项目分析vuex的时候,当我们需要在vuex的action中处理路由跳转的时候,没认识vuex-router-sync的时候,我一般都是直接拿到router对象,然后稍微封装了一下进行跳转的,哈哈~~

在看vue的github官网的时候不小心看到了vuex-router-sync,哈哈!!

才知道原来官方已经有一个工具把store跟router连接起来了,翻了一下vuex-router-sync的源码才知道原来还可以这么操作?于是打算把自己所理解的内容记录下来,欢迎指正,大牛勿喷!!!

我们直接执行:

npm install vuex-router-sync --save

然后配置就很简单了:

import Vue from 'vue' import App from './App' import router from './router'

import store from './store' import {sync} from 'vuex-router-sync' /*

eslint-disable no-new */ new Vue({ el: '#app', router, store, ddd: {name:

'yasin'}, render(h) { return h(App) } })

只需要通过sync方法把store跟router连接起来就可以了

然后我们在vue组件的mounted方法中打印一下route内容:

mounted(){ console.log(this.$store.state.route) }

我们可以看到,在store的route对象其实就是我们router中的currentRoute对象(当前路由).

好啦~

到这我们小伙伴可能要疑问啦,我直接用this.$router.route也可以拿到currentRoute对象啊,为啥还这么复杂呢?这样做又有啥好处呢?不急不急,我们直接看看它的源码来研究下它的功能哈~~

我们找到vuex-router-sync的源码:

exports.sync = function (store, router, options) { var moduleName = (options

|| {}).moduleName || 'route' store.registerModule(moduleName, { namespaced:

true, state: cloneRoute(router.currentRoute), mutations: { 'ROUTE_CHANGED':

function ROUTE_CHANGED (state, transition) { store.state[moduleName] =

cloneRoute(transition.to, transition.from) } } }) var isTimeTraveling = false

var currentPath // sync router on store change var storeUnwatch = store.watch(

function (state) { return state[moduleName]; }, function (route) { var fullPath

= route.fullPath; if (fullPath === currentPath) { return } if (currentPath !=

null) { isTimeTraveling = true router.push(route) } currentPath = fullPath }, {

sync: true } ) // sync store on router navigation var afterEachUnHook =

router.afterEach(function (to, from) { if (isTimeTraveling) { isTimeTraveling =

false return } currentPath = to.fullPath store.commit(moduleName +

'/ROUTE_CHANGED', { to: to, from: from }) }) return function unsync () { // On

unsync, remove router hook if (afterEachUnHook != null) { afterEachUnHook() }

// On unsync, remove store watch if (storeUnwatch != null) { storeUnwatch() }

// On unsync, unregister Module with store store.unregisterModule(moduleName) }

} function cloneRoute (to, from) { var clone = { name: to.name, path: to.path,

hash: to.hash, query: to.query, params: to.params, fullPath: to.fullPath, meta:

to.meta } if (from) { clone.from = cloneRoute(from) } return

Object.freeze(clone) }

好吧,简单的不能再简单了,就70多行代码,这可是在github上好几k的star的库啊~~~ 小伙伴是不是跟我一样惊讶呢?

小伙伴莫及哈,代码虽少,但其中的思路跟用法还是值得我们学习的,这也是我为啥写这篇文章的原因了~ 废话不多说了,我们开始带着源码往下走.

首先是在我们的store中注册了一个module,名字默认为“route”:

store.registerModule(moduleName, { namespaced: true, state:

cloneRoute(router.currentRoute), mutations: { 'ROUTE_CHANGED': function

ROUTE_CHANGED (state, transition) { store.state[moduleName] =

cloneRoute(transition.to, transition.from) } } })

module中提供了一个叫“ROUTE_CHANGED”的mutation处理方法,然后还把router对象中的currentRoute保存在了state中,这也是我们为什么能够通过this.$store.state.route拿到currentRoute的原因.

然后就是监听store中的route对象的变化了,当route发生变化并且当前路由名字不等于需要跳转到路由的时候,直接通过router的push方法进行跳转页面:

var storeUnwatch = store.watch( function (state) { return state[moduleName];

}, function (route) { var fullPath = route.fullPath; if (fullPath ===

currentPath) { return } if (currentPath != null) { isTimeTraveling = true

router.push(route) } currentPath = fullPath }, { sync: true } )

store的watch方法我简单说一下,watch跟我们vue中的watch是一个概念,也就是检测某个属性的变化,然后回调.

最后通过router的全局后置钩子函数监听当前路由对象,修改store中的当前state(当前路由对象):

// sync store on router navigation var afterEachUnHook =

router.afterEach(function (to, from) { if (isTimeTraveling) { isTimeTraveling =

false return } currentPath = to.fullPath store.commit(moduleName +

'/ROUTE_CHANGED', { to: to, from: from }) })

好啦,整个库的源码算是分析完毕了,小伙伴是不是还是很疑问呢? 这东西怎么用呢? 我们接下来结合一个demo来用用它~

一般来说项目为了让页面跟数据逻辑分离出来,一般一些逻辑处理都在vuex的action中进行了,我就简单结合之前的博客中的demo操作了~

我们运行项目看到有一个a页面:

我是a页面

export default { name: 'pageA', mounted(){ console.log(this.$store.state.route)

} }

white; font-size: 24px; height: 100%; }

然后我们项目可能有这么一个需求:“当点击a页面的某个按钮的时候,我们会调后台接口,然后再跳转某个具体的页面~”

我们在a页面放一个“登录”按钮,然后点击去登录,登录成功跳转到登录成功页面:

page-a.vue:

我是a页面

@click="onClick">登录

'pageA', mounted() { console.log(this.$store.state.route) }, methods: {

onClick() { this.$store.dispatch('login') } } }

#page-a-container { background-color: red; color: white; font-size: 24px;

height: 100%; }

然后store中的action:

login({state, commit}) { setTimeout(() => { alert('登录成功')

commit('route/ROUTE_CHANGED',{to: {path: '/b'}}) }, 1000) }

我们直接模拟一下登录,然后跳转到b页面

好啦!! 我们vuex-router-sync就分析到这啦~~

欢迎入群,欢迎交流,qq群链接:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/528282.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux tomcat守护_linux-非root用户运行tomcat(示例代码)

# 前言:为什么要使用非root用户运行tomcatroot用户启动tomcat有一个严重的问题,那就是tomcat具有root权限。这意味着你的任何一个页面脚本(html/js)都具有root权限,所以可以轻易地用页面脚本 修改整个硬盘里的文件!所以最好不要使…

docker 拉取oracle_Docker 拉取 oracle 11g镜像配置-Go语言中文社区

话不多说开始记录docker拉取阿里的oracle11g 镜像并进行配置,用pl/sql 可以登录为最终结果navicat连接是在最后一步但是根据这个进行配置会有一些问题,所以写这篇记录一下,希望可以帮助其他人开始:①、开始拉取镜像-执行命令&…

投票选举 算法_区块链主流共识算法一文全通

在每种伟大的加密货币背后,都有着一个伟大的共识算法。没有共识算法是完美的,但是它们各有千秋。在加密世界中,需要共识算法来防止重支付。这是迄今为止一些最流行的共识算法的简要介绍,从区块链到DAG以及介于两者之间的所有内容。…

clion 引用dll_用CLion实现本地方法并给java调用

众所周知,PHP是世界上最好的语言,java排第二,因为PHP无所不能。但是在某些场景下java还要调用本地方法来提高执行的效率,故java只能排第二。java提供了jni(Java Native Interface)来实现在java中调用本地方法。本地方法在java中用…

mysql没有创建数据库的权限设置_mysql 创建数据库,用户并给用户设置权限

mysql创建数据create database dataBaseName default charset utf8 collate utf8_general_ci; --创建数据库并设置字符集创建用户create user 用户名% identified by 密码; -- ‘%‘ 是该用户可以在任何机器上登录查询用户select user,host.password from mysql.user;给用户设置…

mysql 自定义序列号_在mysql中怎样设置,才能自动添加序列号

事件发生的线程ID(THREAD_ID)活动名称(EVENT_NAME)起止时间戳以及事件的总持续时间(TIMER_START,TIMER_END 和 TIMER_WAIT)在事件停止之前完成的工作单位和预估工作单位(WORK_COMPLETED,WORK_ESTIMATED)因此,当自动重新加入过程开始时&#x…

golang mysql封装_自己封装的golang 操作数据库方法

这个是我用Go写的第一个东东,可能还存在些BUG没有测试到。这里主要是提供一个参考。各位可以改写成自己的风格。在命令行下输入如下两条命令,进行安装go get github.com/male110/SimpleDbgo install github.com/male110/SimpleDbGo语言的数据库操作&…

mysql历史数据备份_Mysql存储过程历史表备份

原文:Mysql存储过程历史表备份应用背景SCADA采集系统需要将实时数据存入历史表。问题1:如何更简单的添加历史数据?2.海量历史数据,比如年数据,如何快速筛选 画曲线?利用mysql的事件,每小时存一次采集数据&a…

如何用js给图片重置宽_如何用js给老婆每天发情话

作者: 加百利真胖原文:https://juejin.cn/events/all一、引言最近家里添了小孩,在家带娃陪产了一些天,深刻体会到老婆带孩子的辛苦。工作的时候不能在家陪她,就想着写个程序,每天固定在固定时间给她发一些情话,好让她在…

世界手机号码格式_世界上手机号码最长的国家是中国,最短的是哪个国家?

现在手机普及率非常之高,基本上人手至少一个手机,那么哪个国家的手机号码最长呢?其实世界上最长的电话号码,是11位数的中国手机号码。为什么手机号码是11位呢?1、号码格式决定我们的手机号可以分为三段,都有…

dockers log查询dockers的文件_Tomcat PUT方法任意文件上传

漏洞背景:tomcat(7.0.0-7.8.1)服务器,开启了HTTP PUT请求方法,web.xml文件中的readonly值设置未false漏洞环境:使用vulhub环境,直接dockers安装安装成功:安装vulhub详见:https://vulhub.org/#/index/漏洞利…

vue替换全部符合’字符串_技术成长日记-Vim实用技巧-4.7查找替换

1. 普通查找/ 向下查找? 向上查找n 查找下一个目标字符串N 查找上一个目标字符串q/ 回溯查找历史,输入该命令后会在状态栏上方显示一个查找历史回溯窗口,如图4.1: 图4.1 回溯查找历史可以选择之前执行过的查找,也可以在最后一行回…

bex5 mysql_bex5 库存系统的增删改查等功能对MYSQL数据库的维护操作 Windows Develop 276万源代码下载- www.pudn.com...

文件名称: bex5下载 收藏√ [5 4 3 2 1 ]开发工具: Java文件大小: 99 KB上传时间: 2017-05-18下载次数: 0提 供 者: 张天详细说明:库存系统的增删改查等功能对MYSQL数据库的维护操作- U5E93 u5B58 u7CFB u7EDF文件列表(点击判断是否您需要的文件,如…

第二百二十六回

文章目录 1. 概念介绍2. 具体细节2.1 发现服务2.2 发现特征值2.3 发送数据2.4 接收数据 3. 代码与效果3.13.2 运行效果 4. 经验总结 我们在上一章回中介绍了"连接蓝牙设备的细节"相关的内容,本章回中将介绍通过蓝牙发送数据的细节.闲话休提,让…

excel导入mysql 截断_解决Excel导入数据库时出现的文本截断问题

问题在把Excel导入到数据库中时,发生文本截断问题:即导入的数据每行只有一部分,原始的Excel数据为:忽略错误导入SQLServer2008过程中,如果源数据和目标数据类型不匹配会导入失败,所以导入数据时会忽略错误&…

map multimapc++_黑马C++视频笔记《STL之map/multimap》

/* map/multimap容器* map/multimap属于关联式容器,底层结构是用二叉树实现。* - map中所有元素都是pair;* - pair中第一个元素为key(键值),起到索引作用,第二个元素为value(实值);* - 所有元素都会根据元素的键值自动…

mysql generator备注_MyBatis Generator 自定义生成注释

注释生成器为了生成db里面的注释,必须自定义注释生成器EmptyCommentGenerator:import org.mybatis.generator.api.CommentGenerator;import org.mybatis.generator.api.IntrospectedColumn;import org.mybatis.generator.api.IntrospectedTable;import o…

mysql表添加完整性约束_SQL语句——完整性约束

1.MySQL支持的完整性约束a.主键约束特点:唯一且非空主键可以由一个字段组成,也可以由多个字段组成如果主键由一个字段组成,既可以添加到列级,也可以添加到表级。如果主键由多个字段组成,则只能添加到表级。(1)在字段的…

通信线路工程验收规范 gb51171-2016_老杨一建通信学堂通信线路工程施工技术

引言:本章节以通信线路工程施工建设为主题,涵盖通信光(电)缆施工通用技术、架空、直埋、管道还有综合布线工程施工技术,深入浅出介绍通信线路工程建设中各环节的工作内容和涉及的相关规范。知识归纳卡名 称:1L412050 章 节…

python制作测试报告_使用 python 生成 extent report 测试报告

背景一直使用 HTMLTestRunner 生成 app 自动化的测试报告内容,虽然加了截图的展示,还是感觉报告不够好看。allure 报告内容可以,但是要以 pytest 管理测试 case,且 pytest 会执行所有以 test_命名的 case,测试结果只有…