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、dispatchactions: { 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？导航守卫（全局、路由独享、组件）？导航前、后获取数据？路由过渡动效？路由滚动行为？路由懒加载、分包？
props：v-slot：//navigate为触发导航的函数//官网说route也是一个props，却没有给例子怎么使用，额 v-slot：//经常是用在路由过渡效果
动态路由、匹配语法、传参、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
命名视图：
使用name参数，与路由表里的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
- 解决刷新时404报错：nginx在对应server的根路由下配置
导航守卫、导航解析过程
导航守卫分为3种：全局、路由独享、组件里
- 全局：beforeEach、beforeResolve、afterEach（针对所有路由）
- 路由独享：beforeEnter、beforeLeave（针对某一条路由）
组件里：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave（进入到组件里时触发的守卫）
注：组件里的导航守卫是写在vue文件里的，在vue3的setup的话，守卫名称改成了onX
一个完整的导航解析过程：
- 导航被触发
- 在失活的组件里调用
beforeRouteLeave守卫 - 调用全局的
beforeEach守卫 - 在重用的组件里调用
beforeRouteUpdate守卫(2.2+)（因为在嵌套路由里可能会出现组件复用情况） - 在路由配置里调用
beforeEnter - 解析异步路由组件
- 在被激活的组件里调用
beforeRouteEnter - 调用全局的
beforeResolve守卫(2.5+) - 导航被确认
- 调用全局的
afterEach钩子 - 触发 DOM 更新
- 调用
beforeRouteEnter守卫中传给next的回调函数，创建好的组件实例会作为回调函数的参数传入
获取数据
有时候，进入某个路由后，需要从服务器获取数据，我们可以通过两种方式来实现：
- 导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示
- 导航完成之前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航
过渡
- 基于单个路由的过渡：略
- 基于多个路由的过渡：略
滚动
const router = createRouter({ history: createWebHashHistory(), routes: [...], scrollBehavior (to, from, savedPosition) { return { top:0 } //需要return一个期望滚动到哪里的位置信息 }
## 路由懒加载、分包
- 路由懒加载会分包，添加了魔法注释，webpack打包时就会生成以该注释命名的chunk，不注释的话会生成chunk.哈希值，不便查看