小白学习vuejs-23-网络模块封装

74 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第23天,点击查看活动详情

自学前端

  • 前文
    • 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
    • 介绍本次学习的是vuex相关知识
    • 这是基于我学习的笔记而来的文章
    • backend: 后端 frontend: 前端

前文补充

Action的写法

  • action的写法呢?接收一个context参数对象
    • 局部状态通过context.state暴露出来, 根节点的状态则为context.rootState
    • actions.png
  • 如果getters中也需要使用全局的状态, 可以接收更多的参数
    • actions2.png

vuex-store文件夹的目录组织-项目结构

  • vuex项目结构.png

ajax

  • Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScriptDOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3]  使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作

网络模块的封装

选择什么网络模块

  • 在Vue中网络请求有非常多的方式, 那么在开发中, 如何选择呢?
  • 选择一: 传统的Ajax是基于XMLHttpRequest(XHR)
  • 为什么不用它呢?
    • 非常好解释, 配置和调用方式等非常混乱.
    • 编码起来看起来就非常蛋疼
    • 所以真实开发中很少直接使用, 而是使用jQuery-Ajax
  • 选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax
    • 相对于传统的Ajax非常好用
  • 为什么不选择它呢?
    • 首先, 我们明确一点, 在Vue的整个开发中都是不需要使用jQuery了
    • 那么就意味着为了方便我们进行一个网络请求, 特意引用一个jQuery, 你觉得合理吗?
    • jQuery代码1w+
    • vue的代码才1w+行
    • 完全没有必要为了用网络请求就引用这个重量级的框架
  • 选择三: 官方在Vue1.x的时候推出了Vue-resource.
    • Vue-resource的体积相对于jQuery小很多
    • 另外Vue-resource是官方推出的
  • 为什么不选择它呢?
    • 在Vue2.0推出后, Vue的作者就在GitHub的Issues中说明了去掉vue-resource,并且以后也不会再更新.
    • 那么意味着以后vue-resource不再支持新版本时也不会再继续更新和维护
    • 对以后的项目开发和维护都存在很大的隐患
  • 选择四: 在说明不再继续更新和维护vue-resource的同时作者还推荐了一个框架: axios为什么用它呢
    • axios有非常多的优点, 并且用起来也非常方便
    • 稍后, 我们对它详细学习

后记

  • 希望对对前端有兴趣的朋友们有帮助
  • 这篇文章主要是关于vuex的, 希望大家喜欢
  • vue的作者是中国人尤雨溪, 非常厉害的人