vuex和导航守卫

简介: vuex和导航守卫

vuex和导航守卫

vuex

1.vuex简介

专门为 Vue.js 设计的状态管理库,它采用集中式存储管理应用的所有组件的状态。

状态,可以简单理解为全局变量

通常我们每个组件都有各自的数据,需要沟通时就使用组件传值。当数据量变大,组件传值会变得极其繁琐且容易冲突。这时候就需要对数据进行统一的管理。


2.特性

Vuex 的状态存储是响应式的。若 store 中的状态发生变化,那么相应的组件也会更新

不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。否则将会使数据变化无法跟踪,难以调试。


3.

vuex的四个属性:
State: 数据源,所有状态都保存在其中,作为这个对象的属性。
Getter: 对状态值进行处理后输出。
Mutations:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。有两个参数,第一个是state,第二个是commit传参的值 this.s t o r e . c o m m i t ( ) m u t a t i o n s 不 能 进 行 异 步 操 作 。 A c t i o n s : 类 似 于 m u t a t i o n , 用 来 对 m u t a t i o n s 进 行 异 步 操 作 , 在 a c t i o n s 中 提 交 一 个 m u t a t i o n , 同 样 有 两 个 参 数 , 第 一 个 是 当 前 对 象 , 用 来 提 交 m u t a t i o n s , 第 二 个 是 传 参 的 值 t h i s . store.commit() mutations不能进行异步操作。 Actions: 类似于 mutation,用来对mutations进行异步操作,在actions中提交一个mutation,同样有两个参数,第一个是当前对象,用来提交mutations,第二个是传参的值this.store.commit()mutations不能进行异步操作。Actions:类似于mutation,用来对mutations进行异步操作,在actions中提交一个mutation,同样有两个参数,第一个是当前对象,用来提交mutations,第二个是传参的值this.store.dispatch()。

4.vuex使用方法

打开文件的cmd命令


20210406171426986.png


在cmd命令里输入 npm install vuex –save回车安装,


20210406172408288.png


然后点开package.josn我们会看到


20210406172933421.png


这就是代表安装完成了,然后在src文件里创建一个store目录


2021040619141417.png

20210406190240539.png

20210406190502794.png


然后在store里创建一个js文件命名为index

在index.js里里写 (这里记住import后面的vue的v要大写,引号里的则不用)

然后在main.js里写这两句话。


20210406195639641.png

20210406195734156.png

20210406200106456.png


然后转到index.js在const store = new Vuex.Store({})里面写state:{}

state里面存储变量输出的话还是使用{{}}这个输出


20210406193414558.png


效果图


2021040620001087.png


Getter和vue的计算属性一样都是可以计算同样都是可以写在const store=new Vuex.Store({})里面其他的属性也同样可以写在里面


导航守卫

1.简介

直白的说,导航守卫就是路由跳转过程中的一些钩子函数,这些函数能让你在跳转过程中操作一些其他的事儿的时机,这就是导航守卫。

比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录。此时可以使用路由导航来实现。

导航守卫有三种:全局的, 单个路由独享的, 组件级的。

2.单个路由

写在路由配置中 beforeEnter 有三个参数,to,from,next

3.全局的

在router/index.js中

beforeEach 使用 router.beforeEach 注册一个全局前置守卫,有三个参数,to,from,next

beforeResolve 用 router.beforeResolve 注册一个全局解析守卫,在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用

afterEach 全局后置钩子,它没有next 参数,也不会改变导航本身,因为此时导航已经完成

4.组件内的

作为属性写在组件内

beforeRouteEnter 此时组件实例还没被创建,不能获取组件实例this

beforeRouteUpdate 在当前路由改变,但是该组件被复用时调用,可以访问组件实例this

beforeRouteLeave 导航离开该组件的对应路由时调用,可以访问组件实例this

5.执行顺序


20210406205945350.png


相关文章
|
传感器
单片机的输入输出端口
单片机的输入输出端口
1856 2
|
5月前
|
敏捷开发 存储 SQL
Quick BI × 宜搭:低代码敏捷开发与专业数据分析的完美融合,驱动企业数字化转型新范式
钉钉低代码平台宜搭与瓴羊QuickBI深度融合,提供前端敏捷构建+后端智能决策的解决方案。通过无缝对接的数据收集与分析、一站式数据分析及报表嵌入等功能,实现业务与数据双重赋能。
347 3
|
5月前
|
传感器 人工智能 算法
智能硬件创新:产品技术双驱,不玩 AI 硬凑
在智能硬件快速发展的今天,仅靠“AI+硬件”的简单叠加难以实现真正创新。产品创新需以用户需求为核心,从设计、功能到体验全方位优化;技术创新则通过新材料、新工艺和新算法提升性能、降低成本。两者深度融合、双轮驱动,方能打造卓越的智能硬件。例如苹果iPhone与大疆无人机,均凭借产品和技术的协同突破成为行业标杆。企业应避免常见“坑”,如用户体验不佳、技术难度高和成本控制难,以真创新引领市场。联系法思诺,探索更多创新可能!
121 0
|
9月前
|
监控 关系型数据库 MySQL
Flink CDC MySQL同步MySQL错误记录
在使用Flink CDC同步MySQL数据时,常见的错误包括连接错误、权限错误、表结构变化、数据类型不匹配、主键冲突和
402 17
|
存储 监控 调度
【Flink】怎么提交的实时任务,有多少Job Manager?
【4月更文挑战第18天】【Flink】怎么提交的实时任务,有多少Job Manager?
|
12月前
|
算法 安全 测试技术
golang 栈数据结构的实现和应用
本文详细介绍了“栈”这一数据结构的特点,并用Golang实现栈。栈是一种FILO(First In Last Out,即先进后出或后进先出)的数据结构。文章展示了如何用slice和链表来实现栈,并通过golang benchmark测试了二者的性能差异。此外,还提供了几个使用栈结构解决的实际算法问题示例,如有效的括号匹配等。
218 1
golang 栈数据结构的实现和应用
|
11月前
|
SQL 存储 数据库
实验4:SQL视图操作技巧与方法
在数据库管理系统中,视图(View)是一种虚拟表,它基于SQL查询的结果集创建,并不实际存储数据
|
存储 网络协议 算法
|
开发工具 异构计算 内存技术
FPGA启动加载过程详解
FPGA启动加载过程详解
1353 0
|
机器学习/深度学习 计算机视觉 Ruby
【池化层】基础回顾:带你认识神经网络中的池化层
【池化层】基础回顾:带你认识神经网络中的池化层
1730 0
【池化层】基础回顾:带你认识神经网络中的池化层