期望效果:
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;
		}
	})
}
Logo

前往低代码交流专区

更多推荐