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命令
在cmd命令里输入 npm install vuex –save回车安装,
然后点开package.josn我们会看到
这就是代表安装完成了,然后在src文件里创建一个store目录
然后在store里创建一个js文件命名为index
在index.js里里写 (这里记住import后面的vue的v要大写,引号里的则不用)
然后在main.js里写这两句话。
然后转到index.js在const store = new Vuex.Store({})里面写state:{}
state里面存储变量输出的话还是使用{{}}这个输出
效果图
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.执行顺序