vue监听缓存数据（localStorage）中值的更新(vue监听页面加载完毕)

编辑：rootadmin

vue监听缓存数据（localStorage）中值的更新

推荐整理分享vue监听缓存数据（localStorage）中值的更新(vue监听页面加载完毕)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue监听缓存变化,vue监听缓存数据变化,vue监听sessionstorage变化,vue监听缓存变化,vue监听后端数据变化,vue监听缓存变化,vue 监听数据,vue监听缓存变化,内容如对您有帮助，希望把文章链接给更多的朋友！

2个vue组件之间数据同步，可以通过监听localStorage数据变化，来改变数据的值。

方法：可以重写localStorage的setItem方法，当调用setItem方法设置新值的时候，会new Event('setItemEvent') 用window.dispatchEvent()这个方法来派发一个事件，让window去监听

以下demo实现的是一个页面获取诗句然后将获取的数据用localStorage存储起来另一个页面进行监听一旦数据发生改变则控制台打印 ‘值改变了’ 并将新值打印出来

实现步骤：

1.先在src下新建utils文件夹，新建tools.js，写一个dispatchEvent派发事件如：utils/tools.js

vue监听缓存数据（localStorage）中值的更新(vue监听页面加载完毕)

代码如下：

function dispatchEventStroage () { const signSetItem = localStorage.setItem localStorage.setItem = function (key, val) { let setEvent = new Event('setItemEvent') setEvent.key = key setEvent.newValue = val window.dispatchEvent(setEvent) signSetItem.apply(this, arguments) }}export default dispatchEventStroage

2.在main.js里面全局引入tools，并use 以便二个vue组件能够触发派发事件

import tools from './utils/tool.js'Vue.use(tool)

3.这里我写了一个index.vue页面将sendSentences.vue组件和watchSentences.vue组件引进来好看效果

<template> <div> <h3>主页面</h3> <watchSentences/> <sendSentences/> </div></template><script>// import axios from 'axios'import watchSentences from './watchSentences.vue'import sendSentences from './sendSentences.vue'export default { components: { watchSentences, sendSentences }}</script>

4.在一个vue组件当中向localStorage存储数据这里是将获取到的诗句存储起来

sendSentences.vue组件methods: { getSentences() { axios({ url: 'https://api.apiopen.top/api/sentences' }).then(res => { this.sentencesTitle = res.data.result.from this.sentences = res.data.result.name window.localStorage.setItem('gsStorename', JSON.stringify(this.sentences)) }) } }

5.在另一个vue组件当中监听localStorage数据变化，来赋值，监听要写在mounted ()中，这里将打印‘值改变了’，并将每次变化后的新值打印出来了代码如下

watchSentences.vue组件 mounted() { // 监听localhostStorage的数据变化，结合utils/tool.js配合使用 window.addEventListener('setItemEvent', function(e) { const newdata = JSON.parse(e.newValue) console.log('值改变了',newdata) }) }

6.完结

效果：

参考自：vue中通过监听localStorage数据变化，实现2个vue组件之间的数据同步_lizige2008的博客-CSDN博客_localstorage setitem 同步

本文链接地址:https://www.jiuchutong.com/zhishi/298525.html 转载请保留说明！

上一篇：Colossal-AI的安装(ai安装教程2020)

下一篇：vue配置开发环境和生产环境(vue开发环境和生产环境域名配置)