vue——不同组件中监听Localstorage变化并实时更新
期望效果:tip:access=1表示超级管理员,access=0表示管理员。希望内容框(一个组件)和顶栏(另一个组件)的管理员权限和localstorage中保持一致。内容框和顶栏属于组件间传值,如果需要同步状态可以用到vuex,但此时可以利用localstorage自身的方法来实现localstorage值的监听。准备首先要了解localStorage的使用,因为此处要监听不要使用localS
期望效果:
tip:access=1表示超级管理员,access=0表示管理员。
希望内容框(一个组件)和顶栏(另一个组件)的管理员权限和localstorage中保持一致。
内容框和顶栏属于组件间传值,如果需要同步状态可以用到vuex,但此时可以利用localstorage自身的方法来实现localstorage值的监听。
准备
首先要了解localStorage的使用,因为此处要监听不要使用localStorage.xxx='xxx'
的方式来给key赋值!!!
localStorage.getItem(key)
:获取指定key本地存储的值
localStorage.setItem(key,value)
:将value存储到key字段
在给localstorage赋值时,一律使用setItem的方式,否则监听无效。
第一步
在项目的根目录创建utils文件夹,再创建一个tool.js文件
我们可以对setItem
事件进行重写,当使用setItem
的时候,触发window.dispatchEvent
派发事件
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;
第二步
在main.js文件全局引入该文件
import tool from "./utils/tool";
Vue.use(tool);
第三步
在所需要监听localstorage值的组件中写入监听事件,根据需要监听相应的key(此处需要监听的是localstorage中的access,所以e.key
对应access
)
newValue
在此处就是最新的localstorage.access,赋给data中的access,即可实时响应在页面中。
data(){
access:''
}
mounted() {
let that = this;
window.addEventListener("setItemEvent", function(e) {
if (e.key === "access") {
that.access=e.newValue;
}
})
}
更多推荐
所有评论(0)