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

Question

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
      })
    }
  }
})

Answer 1

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

ES6 入门教程 https://es6.ruanyifeng.com/#docs/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)
    });