1.问题
开发中,vue项目一般在index.vue组件中包含aside.vue组件,以及Header.vue组件,一般在index.vue中请求接口,把数据传给aside和header组件。
2.Storage方案(localStorage和sessionStorage同理)
2.1在main.js中全局声明resetSetItem方法,代码如下:
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);
}
}
2.2 在index.vue(父组件)中存储值
methods: {
getTreeList() {
axios.get('/sysMenu/getTreeList').then(res => {
let menuList = JSON.stringify(res.data.data);
this.resetSetItem('headerMenu', menuList);
})
}
}
2.3 在aside.vue(子组件)中取值
created() {
window.addEventListener('setItem', () => {
let menuList = sessionStorage.getItem('headerMenu');
if (menuList != null){
this.menu= menuList;
}
}