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.$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. 执行顺序