vue中通过监听localStorage数据变化,实现2个vue组件之间的数据同步
vue中通过监听localStorage数据变化,实现2个vue组件之间的数据同步
2个vue组件之间数据同步,可以通过监听localStorage数据变化,来改变数据的值。
通过查询网上很多方式,也遇到一些问题,我总结了一下:
第一种方法:(本文用这种方法)
重写setItem事件,当使用setItem的时候,触发window.dispatchEvent派发事件
第二种方法:用vuex,此方法我还没有研究
具体步骤:
1.我们写一个dispatchEvent派发事件的js文件,放在一个文件夹里面,比如:utils/tool.js代码如下
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文件中加入一下代码,以便二个vue组件能够触发派发事假
import tool from './utils/tool.js'
Vue.use(tool)
3.在一个vue组件当中向localStorage存储数据,代码如下:
// gsStorename是key名称(存储名称),gsStroe是值,我这里是一个对象,换成json字符串
window.localStorage.setItem('gsStorename', JSON.stringify(gsStore))
4.在另一个vue组件当中监听localStorage数据变化,来赋值,监听要写在mounted ()中,代码如下:
解释:通过addEventListener监听setItemEvent事件来获取新变化的值,e.newValue就是我们的新值,然后用这个值操作其他
mounted () {
// 监听localhostStorage的数据变化,结合utils/tool.js配合使用
const that = this
window.addEventListener('setItemEvent', function (e) {
let newdata = JSON.parse(e.newValue)
that.order = newdata.order
that.cart = newdata.cart
})
},
特别注意:
我刚开始做的时候,考虑不周,没有写const that=this 这一句,我用的如下代码,一直报错,赋值不了,如下代码是错误的,
为什么要用const that=this这一个呢?
那是因为在JavaScript中,this代表的是当前对象,他是会随程序运行不停改变的,
如果用this的话,this是addEventListener监听中当前的对象,所以赋值的时候不能赋值到外面去。
const that = this 其实就是在this改变之前先复制一份给that,那么在程序后面的运行中就可以用that来赋值该函数以外的对象了,比如that.order
mounted () {
// 监听localhostStorage的数据变化,结合utils/tool.js配合使用
window.addEventListener('setItemEvent', function (e) {
let newdata = JSON.parse(e.newValue)
this.order = newdata.order
this.cart = newdata.cart
})
},
更多推荐
所有评论(0)