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


相关文章
|
1月前
|
数据安全/隐私保护
导航守卫有哪三种?
导航守卫有哪三种?
27 0
|
1月前
导航守卫+vuex学习
直白的说,导航守卫就是路由跳转过程中的一些钩子函数,这些函数能让你在跳转过程中操作一些其他的事儿的时机,这就是导航守卫。 比如最常见的登录权限验证,当用户满足条件时,才让其进入导航,否则就取消跳转,并跳到登录页面让其登录。此时可以使用路由导航来实现。 导航守卫有三种:全局的, 单个路由独享的, 组件级的。
|
1月前
|
JavaScript 前端开发
vue3中导航守卫
vue3中导航守卫
19 0
|
1月前
|
JavaScript
详解Vue3——设置导航守卫
详解Vue3——设置导航守卫
30 0
|
7月前
导航守卫的使用
导航守卫的使用
26 0
|
1月前
|
JavaScript
Vue中的路由导航守卫有哪些?它们的执行顺序是什么?
Vue中的路由导航守卫有哪些?它们的执行顺序是什么?
83 6
|
1月前
|
JavaScript 数据安全/隐私保护
Vue状态管理:如何在Vue中实现路由导航守卫?
Vue状态管理:如何在Vue中实现路由导航守卫?
27 2
|
1月前
vue3——导航守卫
vue3——导航守卫
29 0
|
1月前
|
JavaScript
vue导航守卫
Vue 导航守卫是一组在 Vue 路由中用于控制路由导航的钩子函数。它们可以用来在路由切换时执行特定的逻辑,比如验证用户身份、权限检查、数据预加载等。Vue 提供了全局导航守卫和路由级别的导航守卫,使你能够灵活地控制应用的导航行为。
|
8月前
|
JavaScript 前端开发 测试技术
【Vue】vue中的路由导航守卫(路由的生命周期)
【Vue】vue中的路由导航守卫(路由的生命周期)
75 0