Vue本地缓存(sessionStorage/localStorage)/全局数据总线/vuex

sessionStorage

sessionStorage 只在当前浏览器有效，关闭即销毁，可保存即时信息，实现组件间数据存储修改功能

sessionStorage.setItem('name':'toney') //设置共享数据

sessionStorage.getItme('name')//获取共享数据

sessionStorage.removeItem('name')//清除共享数据

localStorage

localStorage 在浏览器可长期保存，数据缓存过多影响浏览器性能，可实现组件间数据存储修改

localStorage.setItem('name':'toney') //设置共享数据

localStorage.getItme('name')//获取共享数据

localStorage.removeItem('name')//清除共享数据

共性

sessionStorage  localStorage 只在客户端缓存，不与服务端交互，相当浏览器中数据库功能，有缓存大小限制 5M

globalEventBus (全局数据总线)

vue非父子组件之间的交互且项目业务足够单一， 一般通过一个空白vue 实例实现 我们称之为数据总线 event bus

const bus = new bus() // 实例化

//A.vue

this.bus.$emit('myEvent',obj)

//B.vue

this.bus.$on('Mevent',obj=>{

//数据处理

})

注意两点：1、事件的监听在mounted中进行 2、监听一定要销毁，不然会重复监听

Vuex

Vuex 实现大型项目之间数据共享。

参考大神文章 https://www.cnblogs.com/web-xu/articles/12462792.html

https://zhuanlan.zhihu.com/p/41237859