vue2.0学习之axios的封装与vuex介绍-创新互联

一、前言

博主也是vue道路上的行者，道行不深，希望自己的东西能对大家有所帮助。这篇博客针对 了解过vue基础，但是没有做过vue项目的童鞋。如果想看基础指令，可以看我之前的一篇博客，请点击  跳转，  不过我还是建议看文档比较好。os: Vue文档是非常详细的

二、准备

做vue单页应用都需要会什么？

    1.  vue的脚手架，直接帮你建好项目。再看看自己想要啥，补充啥！  os:  Git 上有很多成品项目，可以找一个好点的拉下来

　　注：路由按需加载、热加载 等这些都是基础功能，在这不多说。os: 慕课网有Vue的课程，网上有资源，挺不错的

    2. 引入并会使用 vuex。对共享变量进行统一管理，解决多层组件传数据的问题。这个咱后面详说。

    3. 封装 axios，对请求进行统一的管理，并减少代码量。

三、关于vuex

出现背景：  了解过vue1.0的人应该都知道，vue的父子组件通信是很烦的，一层还好。如果有个3、4层，那父子组件通信，就头疼了。以前，这是需要开发者捋清逻辑，在合适的地方修改并传递的。但是vue2.0为了解决这个问题，提出了vuex，状态统一管理。

作用：vuex 将所有需要共享的变量放在一起，像一个仓库一般，你想对仓库中的变量  读取、修改 ，直接调 指定方法就可以，超级方便。

    结构： vuex的结构大致为：

　　　　　　　state:  存放所有变量

　　　　　　　mutations  存放同步读取、修改state的的方法

　　　　　　    action       存放异步读取、修改state的的方法

　　　　　　　 .......还有很多其他的  os: 这篇博客只是帮大家了解如何用Vue做单页应用。　　　　

注：1.  不是所有变量都要放到 state 中，vuex 创立的初衷是方便我们对变量的管理，然而对组件的一些私有变量，不需要和别的组件共享。所以，state里面只放全局变量、多组件共享变量。

　　2.  解释一下 action ，所谓异步，就是在 action 文件中写方法，调 axios，然后再 调 mutations 同步修改state。很多人不理解，其实，这就是一个概念性的问题。action并没有从根本上解决异步修改state的竞争问题，但是我们需要理解、并将 异步这个操作 摘出来放在一起。

　　os: js脚本 本来就是同步的东西，一根筋，同一时间无法处理2件事，不存在多线程处理事务。不过，科技发展的这么牛逼，大家懂得。这个异步、竞争的思想还是要提出来的，指不定哪天就被大家研究出了解决方案。

四、关于vuex的具体使用

先看一下项目的部分目录结构

1. state.js

const state = {
 topList: {},
 msgg: '1231321312',
 alertFlag: {state: false, type: ''},
 errorStatus: '',
 alertData: {title: '警告', content: '这是敏感信息，一旦删除，不可再恢复，确认删除吗', operateOk: '确定', operateCan: '取消', time: ''},
 httpError: {
 hasError: false,
 status: '',
 statusText: ''
 },
 tip: {
 tipFlag: false,
 tipMsg: ''
 }
}

export default state

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。