vue中aciton使用的自我总结
作者:互联网
一、需求:
我需要从后台中获取菜单列表在路由守卫中进行限制。
二、遇到的问题:
action中setMenuData的方法如下:
actions: { setMenuData(context){ getMenu().then(res => { console.log("在状态管理器中的异步方法执行接口",res) context.commit('SET_MENU',res.data.data) }) } },
路由守卫如下:
router.beforeEach((to, from, next) => { store.dispatch("setMenuData").then(res=>{ console.log("====",store.getters.getMenuData) addRoutes(store.getters.getMenuData) }) } )
state.menuList一直是空的,应该有数据才是期望的值
三、解决方案:
router.beforeEach((to, from, next) => { store.dispatch("setMenuData").then(res=>{ setTimeout(()=>{ console.log("等待1秒钟获得数据",store.getters.getMenuData) addRoutes(store.getters.getMenuData) if (to.matched.length == 0) { router.push(to.path) } next() },1000) }) } )
在回调函数中增加计时器,计时器是个异步方法,等待一秒钟,即输出了我想要的数据。
四、自我总结
像这种情况就是异步情况,action里面可以放置一些异步的方法,例如:数据请求、计时器等。
标签:异步,vue,res,getters,自我,aciton,getMenuData,setMenuData,store 来源: https://www.cnblogs.com/zangaoY/p/16443415.html