vuex

本节 vuex 须要把握，state、getters、mutations、actions、module 的含意、定义方法、调用办法

state

• 全局状态

  const count = computed(()=>store.state.count)   // 应用 computed 为其保留响应式

getters

从 state 中派生出的状态，相似于 vue 中的计算属性computed

• 定义：接管 state、getters、rootState、rootGetters 参数（留神参数有程序）、且可通过属性或办法的形式拜访

  getters: {doneTodosCount: (state, getters, rootState, rootGetters) => { // 通过属性拜访，参数有程序
      return getters.doneTodos.length
    },
    getTodoById: (state, getters, rootState, rootGetters) => (id) => {// 通过办法拜访
      return state.todos.find(todo => todo.id === id)
    }
  }

• 调用：

  store.getters.doneTodosCount   // 通过属性拜访
  store.getters.getTodoById(2)   // 通过办法拜访

mutations

扭转 state 全局状态值的惟一办法，举荐应用常量代替 mutation 事件类型

mutation必须是同步函数：devtools工具会记录 mutation 的日记，捕捉到每一个 mutation 办法执行时的前一状态和后一状态的快照，如果 mutation 执行异步操作，就无奈追踪到数据变动

• 定义：接管 state、payload 参数，必须是同步函数

  mutations: {increment (state, payload) {state.count++}
  }

• 调用：

  store.commit('xx', {params_1:xx,params_2:xx} )        // 调用办法 1
  store.commit({type:'xx', params_1:xx, params_2:xx})    // 调用办法 2 

actions

action 提交的是 mutation，而不是间接变更状态，action 能够蕴含异步操作

• 定义：可接管 context、payload 参数，其中 context 可解构为state、rootState、getters、rootGetters、commit、dispatch

  actions: {actionA ({ state,rootState,getters,rootGetters,commit,dispatch}, payload) {return new Promise((resolve, reject) => {setTimeout(() => {commit('someMutation')
          resolve()}, 1000)
      })
    }
  }

• 调用：

  store.dispatch('xx', {params_1:xx,params_2:xx} )
  store.dispatch({type:'xx', params_1:xx, params_2:xx})

module

略

vue-router

本章 vue-router 须要把握，动静路由及匹配语法、传参、404？嵌套路由、路由复用？命名路由、命名视图？路由的 2 种定义形式：申明式、编程式路由？路由元信息、props、重命名、别名？路由的 2 种模式：hash、history？导航守卫（全局、路由独享、组件）？导航前、后获取数据？路由过渡动效？路由滚动行为？路由懒加载、分包？

<router-link>

• props：

  <router-link  
     to=''   // 能够是字符串、对象
     replace
     custom  //custom+navigate 是 vue3 用来自定义标签（vue2 用 tag='xx'，不设置默认就是渲染成 a 标签）active-class=''exact-active-class=''    // 仅匹配 a 时失效
  >

• v-slot：

  //navigate 为触发导航的函数
  <router-link v-slot='{href,route,navigate,isActive,isExactActive}’>

<router-view>

• props：

  <router-view name=''>  // 官网说 route 也是一个 props，却没有给例子怎么应用，额

• v-slot：

  <router-view v-slot='{route, Component}'>    // 常常是用在路由过渡成果

动静路由、匹配语法、传参、404

• 动静路由、及匹配语法和传参：

  • : 冒号：在 router.js 路由表里用 : 冒号 设置动静路由参数，且可设置动静路由参数的匹配规定为正则表达式、可选参数（?）、可反复参数（+、*）

  • path、name：当用 path 匹配路由时，须要在 url 上提供动静路由参数（否则报错）

    ​ 当用 name 匹配路由时，须要在 params 参数里提供动静路由参数（否则报错）

    ​ name优先级高于 path，即匹配时 2 个都提供的话，会疏忽path 用name去匹配路由

    ​ 匹配

  • query、params：在 vue 文件里可通过 route.params 获取到动静路由参数

  ​ 传递参数时，query会在 url 上显示，params则不会

  ​ path匹配路由时，params参数会被疏忽（控制台会有这句的提醒）

• 404：vue2 里的 404 匹配须要放在路由表的最初一项，vue3 不须要

嵌套路由、复用

• 嵌套路由为在父路由的 children 属性（数组）里设置子路由，子路由的 path 不能以 ’/’ 结尾
• 应用带有参数的路由时须要留神的是，当用户从 /users/johnny 导航到 /users/jolyne 时，雷同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创立，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。若不心愿复用组件，可设置不同的 routerKey

命名路由、命名视图

• 命名路由：在定义路由时，应用 name

  ​ 特点：匹配路由时 name 的优先级高于 path

• 命名视图：<router-view name=”> 应用 name 参数，与路由表里的 name 对应

  ​ 特点：用在嵌套路由里，冀望子组件渲染到对应地位（即对应的 <router-view name=”> 里）

申明式、编程式路由

略

meta、props、redirect、alias

• meta 路由元信息：在路由里设置 meta 参数后，便可在页面通过 route.meta、或导航守卫里通过 to.meta 获取
• props：在路由里设置 {props:true} 后，在 vue 文件里就能够像父子通信里的 props 那样应用
• redirect 重定向：redirect 的值能够是字符串、命名路由、办法
• alias 别名：实质上就是 url 的一部分

hash、history

• hash：

  • 基于浏览器的 window.location 对象，url 带有 #，# 后的内容并不作为 url 的一部分向服务器发送申请，因而不须要额定配置

• history：

  • 基于浏览器的 window.history 对象，路由跳转时会向后端发送以后的 url，因而须要在后端配置，否则刷新页面时会有 404 报错

    • 解决刷新时 404 报错：nginx 在对应 server 的根路由下配置try_files $uri /index.html

导航守卫、导航解析过程

• 导航守卫分为 3 种：全局、路由独享、组件里

  • 全局：beforeEach、beforeResolve、afterEach（针对所有路由）
  • 路由独享：beforeEnter、beforeLeave（针对某一条路由）

  • 组件里：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave（进入到组件里时触发的守卫）

    注：组件里的导航守卫是写在 vue 文件里的，在 vue3 的 setup 的话，守卫名称改成了 onX

• 一个残缺的导航解析过程：

  1. 导航被触发
  2. 在失活的组件里调用 beforeRouteLeave 守卫
  3. 调用全局的 beforeEach 守卫
  4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)（因为在嵌套路由里可能会呈现组件复用状况）
  5. 在路由配置里调用 beforeEnter
  6. 解析异步路由组件
  7. 在被激活的组件里调用 beforeRouteEnter
  8. 调用全局的 beforeResolve 守卫(2.5+)
  9. 导航被确认
  10. 调用全局的 afterEach 钩子
  11. 触发 DOM 更新
  12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创立好的组件实例会作为回调函数的参数传入

获取数据

有时候，进入某个路由后，须要从服务器获取数据，咱们能够通过两种形式来实现：

• 导航实现之后获取：先实现导航，而后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的批示
• 导航实现之前获取：导航实现前，在路由进入的守卫中获取数据，在数据获取胜利后执行导航

过渡

• 基于单个路由的过渡：略
• 基于多个路由的过渡：略

滚动

• const router = createRouter({history: createWebHashHistory(),
    routes: [...],
    scrollBehavior (to, from, savedPosition) {return { top:0}      // 须要 return 一个冀望滚动到哪里的地位信息
    }

## 路由懒加载、分包

- 路由懒加载会分包，增加了魔法正文，webpack 打包时就会生成以该正文命名的 chunk，不正文的话会生成 chunk. 哈希值，不便查看