Vue数据存储和页面传值

数据存储和页面传值

数据存储

Vue 数据存储方法有Vuex、LocalStorage、SessionStorage、cookie、IndexedDB、WebSQL等，我们根据项目中的使用情况，对前三种做一个横向比较：

1. Vuex存储在内存；LocalStorage、SessionStorage则以文件的方式存储在本地，并且只能存储字符串类型，对于复杂的对象可以使用JSON.stringify、JSON.parse转换数据类型，但这种转换会有一定的性能损耗，具体的对比可以点击这篇文章；

2. 当刷新页面，Vuex会丢失数据；当关闭浏览器，SessionStorage会丢失数据；LocalStorage会永久存储数据，所有页面共享一块存储区域，每个浏览器内核对存储大小限制不一样，数据需要手动删除；

3. Vuex是响应式的，LocalStorage、SessionStorage是非响应式的；

4. Vuex写法相对复杂，LocalStorage、SessionStorage写法简单，但对于大型项目而言Vuex可以分模块，并且保存数据操作等有钩子函数，便于全局操作。

页面传值

1. 路由配置传参：path:'/componentsB/:name/:age/:sex'
   需要匹配路由

2. params传参：

this.$router.push({
      name:'componentsB',
      params:{
           exa:'我是传到组件B的参数'
       }
})

缺点：刷新会丢失数据

3. query传参

this.$router.push({
      name:'componentsB',
      query:{
           exa:'我是传到组件B的参数'
       }
})

缺点：url会携带参数

4. 使用缓存（LocalStorage、SessionStorage）或状态管理（Vuex）等

数据持久化

实现的数据持久化相关特点说明：

1. 触发时机：标签页关闭或者刷新；
2. 存储位置：SessionStorage，特点就是标签页关闭或者刷新的时候SessionStorage的数据不会被清除，但是在浏览器关闭的时候数据会被清除，不会污染下次打开的页面；
3. 还原时机：持久化数据被触发后，被重新打开的页面和关闭或刷新的页面是同一个，就把先前存储在SessionStorage中的数据还原到对应的参数中；
4. 数据范围：router传参中的params和Vuex中除了keepAlive的里面的数据。