VUE内容学习
路由守卫
- 完整的导航解析流程
1) 导航被触发。
2) 在失活的组件里调用离开守卫。
3) 调用全局的 beforeEach 守卫。
4) 在重用的组件里调用 beforeRouteUpdate 守卫
5) 在路由配置里调用 beforeEnter。
6) 解析异步路由组件。
7) 在被激活的组件里调用 beforeRouteEnter。
8) 调用全局的 beforeResolve 守卫
9) 导航被确认。
10) 调用全局的 afterEach 钩子。
11) 触发 DOM 更新。
12) 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
- 导航守卫
1) 全局前置守卫
router.beforeEach((to, from, next) => { })
守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中
2) 全局解析守卫
router.beforeResolve((to, from, next) => { })
在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫被调用
3) 全局后置钩子
router.afterEach((to, from) => { })
这些钩子不会接受 next 函数也不会改变导航本身
4) 路由独享的守卫
beforeEnter: (to, from, next) => { }（路由配置上直接定义）
5) 组件内的守卫
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 ‘this’，因为当守卫执行前，组件实例还没被创建
// 但支持给 next 传递回调 },
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 可以访问组件实例 ‘this’ },
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 ‘this’}
VUEX
- 五种基本的对象
1) state：存储状态（变量）
2) getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
3) mutations：修改状态，并且是同步的。在组件中使用$store.commit(' ',params)。这个和我们组件中的自定义事件类似。
4) actions：异步操作。在组件中使用是$store.dispath(' ')
5) modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。
- vuex中module的命名空间概念
1) 使用命名空间的原因
默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的。这样会导致
a) 不同模块中有相同命名的mutations、actions时，不同模块对同一 mutation 或 action 作出响应。
b) 当一个项目中store分了很多模块的时候，在使用辅助函数mapState、mapGetters、mapMutations、mapActions时，很难查询，引用的state、getters、mutations、actions来自于哪个模块，不便于后期维护。
2) 使用命名空间的方法
可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
a) 在模块中添加 namespaced: true， 开始命名空间
b) 在根store中引入模块并挂载
c) 在辅助函数mapState的第一参数上，填写上模块的命名空间名。
或者，通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数。