循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用(循序渐进的下一句是什么)

网友投稿 322 2022-06-07


在我们开发Vue应用的时候,很多时候需要记录一些变量的内容,这些可以用来做界面状态的承载,也可以作为页面间交换数据的处理,处理这些内容可以归为Vuex的状态控制。例如我们往往前端需要访问后端数据,一般是通过封装的Web API调用获取数据,而使用Store模式来处理相关的数据或者状态的变化,而视图View主要就是界面的展示处理。本篇随笔主要介绍如何整合这三者之间的关系,实现数据的获取、处理、展示等逻辑操作。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。关于Vuex的相关State、Getter、Mutation、Action、Module之间的差异和联系,详细可以参考下:https://vuex.vuejs.org/zh/

1、前后端的分离和Web API 优先路线设计

 Web API 是一种应用接口框架,它能够构建HTTP服务以支撑更广泛的客户端(包括浏览器,手机和平板电脑等移动设备)的框架,  ASP.NET Web API 是一种用于在 .NET Framework/ .net Core 上构建 RESTful 应用程序的理想平台。在目前发达的应用场景下,我们往往需要接入Winform客户端、APP程序、网站程序、以及目前热火朝天的微信应用等,这些数据应该可以由同一个服务提供,这个就是我们所需要构建的Web API平台。由于Web API层作为一个公共的接口层,我们就很好保证了各个界面应用层的数据一致性。

由于倾向于前后端的完全分离,我们后端就可以完全由Web API统一构建支持,可以采用.net framework或者.net core构建的统一接口平台,可以简单由Asp.net 做的Web API接口平台,也可以基于ABP-aspnetboilerplate( ABP框架随笔介绍)框架基础上构建的Web API平台。

 

这样我们就可以基于这些API接口构建前端多项应用,如包括Web前端、Winform前端、以及对接各种APP等应用。

引入了前后端分离的VUE + Element 的开发方式,那么前后端的边界则非常清晰,前端可以在通过网络获取对应的JSON就可以构建前端的应用了。

 在前端处理中,主要就是利用Vuex模式中的Store对象里实现对Action和Mutation的请求处理,获取数据后,实现对State状态中的数据进行更新。如果仅仅是当前页面的数据处理,甚至可以不需要存储State信息,直接获取到返回的数据,直接更新到界面视图上即可。

在开发前期,我们甚至可以不需要和后端发生任何关系,通过Mock数据代替从Web API上请求数据,只要Mock的数据结构和Web API接口返回的JSON一致,我们就可以在后期实现快速的对接,而不影响现有的代码处理方式。

  

2、Axios网络请求处理

在我们进一步处理前,我们需要知道Vuex里面的一些对象概念和他们之间的关系。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。关于Vuex的相关State、Getter、Mutation、Action、Module之间的差异和联系,详细可以参考下:https://vuex.vuejs.org/zh/

在开始发起网络请求之前,我们需要了解axios 这个东西,axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范。在这里我们只需要知道它是非常强大的网络请求处理库,且得到广泛应用即可,列举几个代码案例进行了解。

POST请求


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:用Flutter做桌上弹球(绘图(Canvas&CustomPaint)API)
下一篇:Angular SPA基于Ocelot API网关与IdentityServer4的身份认证与授权(四)(angular框架)
相关文章

 发表评论

暂时没有评论,来抢沙发吧~