vue中aciton使用的自我总结
2024-10-21 05:29:41
一、需求：
我需要从后台中获取菜单列表在路由守卫中进行限制。
二、遇到的问题：
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里面可以放置一些异步的方法，例如：数据请求、计时器等。
最新文章
- SQL Server 索引和表体系结构（非聚集索引）
- CodeSmith模板
- hdfs 数据块重分布 sbin/start-balancer.sh -threshold
- 对request.getSession(false)的理解（附程序员常疏忽的一个漏洞）--转
- JavaScript 随机数函数
- web之ios开关按钮
- iOS系统原生二维码条形码扫描
- ajax跨域请求--jsonp实例
- PL/SQL 编程（三 ）程序包和包体，触发器，视图，索引
- Spark源码剖析（七）：Job触发流程原理与源码剖析
- jQuery --- 第四期 (jQuery动效)
- Java 获取当前线程、进程、服务器ip
- 【ybt1252】走迷宫
- centos7.3安装nvidia驱动和cuda9
- matlab知识
- spring boot 知识点
- idou老师教你学istio ：基于角色的访问控制
- Solr4.4入门，介绍Solr的安装、IK分词器的配置及高亮查询结果(转)
- js-NodeList对象和HTMLCollection对象
- OpenFileDialog 打开文件