一、综合案例
**1.**分析
**2.**组件缓存 keep-alive
问题：从面经点到详情页，又点返回，数据重新加载了 → 希望回到原来的位置
原因：路由跳转后，组件被销毁了，返回回来组件又被重建了，所以数据重新被加载了
解决：利用 keep-alive 将组件缓存下来
（1）keep-alive定义
keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们
keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中
（2）keep-alive的优点
在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，
减少加载时间及性能消耗，提高用户体验性。
（3）语法
（4）keep-alive的三个属性
① include ： 组件名数组，只有匹配的组件会被缓存
② exclude ： 组件名数组，任何匹配的组件都不会被缓存
③ max ： 最多可以缓存多少组件实例
（5）keep-alive的使用会触发两个生命周期函数
activated 当组件被激活（使用）的时候触发 → 进入这个页面的时候触发
deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发
组件缓存后就不会执行组件的created, mounted, destroyed 等钩子了
所以其提供了actived 和 deactived钩子，帮我们实现业务需求。
**3.**总结
**4.**自定义创建项目
**5.**ESlint 代码规范
规范说明：https://standardjs.com/rules-zhcn.html
自动修正：基于 vscode 插件 ESLint 高亮错误，并通过配置 自动 帮助我们修复错误。
二、Vuex的基本使用
1.vuex概述
**2.**构建 vuex [多组件数据共享] 环境
目标：基于脚手架创建项目，构建 vuex 多组件数据共享环境
**3.**创建一个空仓库
