开发中,vue项目一般在index.vue组件中包含aside.vue组件,以及Header.vue组件,一般在index.vue中请求接口,把数据传给aside和header组件。
Vue.prototype.resetSetItem = function (key, newVal) { //根据自己需要修改 var targetKey = ['headerMenu','asideMenu','activeAsidePath'] if (targetKey.includes(key)) { // 创建一个StorageEvent事件 var asideMenuEvent = document.createEvent('StorageEvent'); const storage = { setItem: function (k, val) { sessionStorage.setItem(k, val); // 初始化创建的事件 asideMenuEvent.initStorageEvent('setItem', false, false, k, null, val, null, null); // 派发对象 window.dispatchEvent(asideMenuEvent); } } return storage.setItem(key, newVal); } }
methods: { getTreeList() { axios.get('/sysMenu/getTreeList').then(res => { let menuList = JSON.stringify(res.data.data); this.resetSetItem('headerMenu', menuList); }) } }
created() { window.addEventListener('setItem', () => { let menuList = sessionStorage.getItem('headerMenu'); if (menuList != null){ this.menu= menuList; } }