vue——不同组件中监听Localstorage变化并实时更新

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