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的具体使用

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

                

vue2.0 axios封装、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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wssxzz.html