数据存储和页面传值
数据存储
Vue 数据存储方法有Vuex、LocalStorage、SessionStorage、cookie、IndexedDB、WebSQL等，我们根据项目中的使用情况，对前三种做一个横向比较：
Vuex存储在内存；LocalStorage、SessionStorage则以文件的方式存储在本地，并且只能存储字符串类型，对于复杂的对象可以使用JSON.stringify、JSON.parse转换数据类型，但这种转换会有一定的性能损耗，具体的对比可以点击这篇文章；当刷新页面，
Vuex会丢失数据；当关闭浏览器，SessionStorage会丢失数据；LocalStorage会永久存储数据，所有页面共享一块存储区域，每个浏览器内核对存储大小限制不一样，数据需要手动删除；Vuex是响应式的，LocalStorage、SessionStorage是非响应式的；Vuex写法相对复杂，LocalStorage、SessionStorage写法简单，但对于大型项目而言Vuex可以分模块，并且保存数据操作等有钩子函数，便于全局操作。
页面传值
路由配置传参：path:'/componentsB/:name/:age/:sex'
需要匹配路由params传参：
this.$router.push({
name:'componentsB',
params:{
exa:'我是传到组件B的参数'
}
})
缺点：刷新会丢失数据
- query传参
this.$router.push({
name:'componentsB',
query:{
exa:'我是传到组件B的参数'
}
})
缺点：url会携带参数
- 使用缓存（
LocalStorage、SessionStorage）或状态管理（Vuex）等
数据持久化
实现的数据持久化相关特点说明：
- 触发时机：标签页关闭或者刷新；
- 存储位置：
SessionStorage，特点就是标签页关闭或者刷新的时候SessionStorage的数据不会被清除，但是在浏览器关闭的时候数据会被清除，不会污染下次打开的页面； - 还原时机：持久化数据被触发后，被重新打开的页面和关闭或刷新的页面是同一个，就把先前存储在
SessionStorage中的数据还原到对应的参数中； - 数据范围：router传参中的params和
Vuex中除了keepAlive的里面的数据。
