Vuex异步请求数据通过computed计算属性值

问题描述:

使用Vuex管理数据时,在组件内使用$emit分发事件后,获取回来的数据要自动更新到该组件内,需要使用computed来计算更新。

一开始尝试使用赋值给data的方法,后来发现重新发起ajax请求数据后无法更新新数据。

因为data属性只是在组件实例化时赋值一次,依赖发生变化时不会更新,想要使用data来获取computed同样的效果可以对data的字段进行watch。

而计算属性是基于它的依赖缓存的。计算属性在它的相关依赖发生改变时会重新取值,所以当ajax请求回来的数据发生变化时,计算属性的值会进行更新,相关的模板引用也会重新渲染。

相比较而言使用computed更方便,如下是在实际应用中要不断更新的字段,this.$store.state.templateStorage.recommendTpl 是由ajax重新获取的数据。

computed: {
      recommendTpl () {
        return this.$store.state.templateStorage.recommendTpl;
      }
    },
posted @   雪莉06  阅读(3751)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示