vue 菜单异步的问题请教！我估计是异步的问题

vue 菜单异步的问题请教！我估计是异步的问题

  import { storeToRefs } from 'pinia';
  import useStore from '../store';
  const { menuLeft } = useStore()
  const { menuLeftData } = storeToRefs(menuLeft)
  const { getDataMenuLeft } = menuLeft    // pinia  store 向数据库调用数据的函数 

 onBeforeMount(() => {
    getDataMenuLeft('work_group/') // 从后端数据库获取 菜单数据，这里控制台 后出来

  })
  onMounted(()=>{
    menuLeftInit(1) // 初始化菜单， 这里控制台 先出来
  })

现在问题是 控制台显示， 先执行了 初始化菜单 函数，然后才读到了 菜单数据，
正常进入没问题，当点右键刷新时，菜单就混乱了。

import { defineStore } from "pinia";
import { MenuLeft, Themes} from '../../types/data'
import { getMethod, postMethod } from '../../api/myHttp'
const menuLeftStore = defineStore('meunLeft',{
  state:()=>{
    return {
      menuLeftData : [] as Array<MenuLeft>,
    }
  },
  actions:{
    async getDataMenuLeft(url:string){  
      await getMethod(url).then(res=>{
        console.log('sssssssss11111111111111111',res)  // 这里控制台 后面才出来
        this.menuLeftData = res.data.menu
      })
    }
  }
})

看题主代码用到了async+Promise对象，应该还是没完全理解，可以看下阮一峰老师的教程

ES6 入门教程 https://es6.ruanyifeng.com/#docs/async

更改下代码结构确保数据加载完毕后再执行初始化操作就能解决。用下面2中方法之一。

• 放到onMounted事件中，这样保证dom已经准备好，async getDataMenuLeft方法异步，会返回promise实例，在then中执行初始化能确保数据已经获取到从而能正确初始化

    onMounted(() => {
        getDataMenuLeft('work_group/').then(() => {
            menuLeftInit(1)
        })
    });

• 将onMounted回调函数标记为异步方法，在方法体内用await等待getDataMenuLeft执行完毕，挂起起后续代码执行得到数据后再执行执行menuLeftInit初始化菜单

    onMounted(async () => {
        await getDataMenuLeft('work_group/');
        menuLeftInit(1)
    });

getDataMenuLeft('work_group/') 不要放onBeforeMount中,应该放onMounted中
改成这样

onMounted(()=>{
    getDataMenuLeft('work_group/').then(()=>{
        menuLeftInit(1) // 初始化菜单， 这里控制台 先出来
    });
})

或者

onMounted(async ()=>{
    await getDataMenuLeft('work_group/')
    menuLeftInit(1) // 初始化菜单， 这里控制台 先出来
})

99999

onMounted 里加载实现

改成getDataMenuLeft('work_group/').then(()=>{
menuLeftInit(1)
});

onMounted(()=>{
menuLeftInit(1) // 初始化菜单， 这里控制台 先出来
})
改为
onMounted(()=>{
this.$nextTick(()=>{
menuLeftInit(1) // 初始化菜单， 这里控制台 先出来
}
})
你看这样可以不

onBeforeMount DOM还没渲染完就开始加载接口渲染，页面肯定会有问题，改成onMounted，页面完成后再试试

onMounted 中可以得到 ref的RefImpl的对象, 通过.value 获取真实dom

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632

onBeforeMount dom元素还未完成挂载