扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
需求：不同组件间共用同一数据，当一个组件将数据发生变化时，其他组件也可以响应该变化。
分析：vue无法监听localstorage的变化。localstorage主要用于不同页面间传值，vue适合组件间传值。对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据（vuex在页面刷新的时候存储的值会丢失，localstorage存储在本地浏览器中），可以采用vuex+localstorage的方式。
关于vuex和storage的区别
1.最重要的区别：vuex存储在内存，localstorage则以文件的方式存储在本地
2.应用场景：vuex用于组件之间的传值，localstorage则主要用于不同页面之间的传值。
3.永久性：当刷新页面时vuex存储的值会丢失，localstorage不会。
注：很多同学觉得用localstorage可以代替vuex, 对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage无法做到，原因就是区别1。
关于vuex参考文档：http://vuex.vuejs.org/zh-cn/index.html
实现过程：以首页展示用户头像信息，修改个人信息在公共组件头部组件中为例，当用户修改个人信息时首页的图片实时变化，如果不对头像信息做存储更新，每次用户修改完只有刷新页面或者从其他页面返回回来才能看到变化，即新设置的头像信息，仅展示核心代码。
1.首先先定义一个变量在state中。State负责存储整个应用的状态数据，后期就可以使用this.$store.state直接获取状态。也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去。
const state = {
imgInfo:null //首页头像信息
}
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网