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} )        //调用办法1store.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.哈希值，不便查看