首页 科技正文

欧博注册:Vuex与axios的封装和挪用

admin 科技 2020-07-19 14 0

Vuex状态治理

状态就是数据。    在react里有个Flux的数据流治理(单向数据流) 作用1:实现组件之间的数据共享。 作用2:用于缓存。(制止当用户频仍点击,页面不停调接口)     先安装状态治理工具 npm install vuex -S   1.在Src文件夹里建立一个store文件夹。 2.建立一个index.js的文件,内里引入vuex,如下   再在main.js入口文件里引入状态治理. 欧博注册:Vuex与axios的封装和挪用 第1张    

store里的各个选项的寄义:

①:state----->要被共享的数据,都放在state中 欧博注册:Vuex与axios的封装和挪用 第2张 在需要引用的地方通过$store.state.msg对应的key值,即可取到共享的数据. 欧博注册:Vuex与axios的封装和挪用 第3张 ②:mutations---------->是用于改变与修改state的,当state被修改完成,页面视图自动更新。(mutations里的每个方式的第一个形参都为state) 作者尤雨溪不建议用这种方式直接修改共享的state数据. 欧博注册:Vuex与axios的封装和挪用 第4张 建议写法: 欧博注册:Vuex与axios的封装和挪用 第5张     欧博注册:Vuex与axios的封装和挪用 第6张   状态治理是一种单向数据流 欧博注册:Vuex与axios的封装和挪用 第7张 欧博注册:Vuex与axios的封装和挪用 第8张     dev-tools的安装: 欧博注册:Vuex与axios的封装和挪用 第9张 用于配合vuex举行代码的调试事情.若是使用之前那种强制更改state共享数据的方式,则在调试工具(F12)里的vue工具中,第二个闹钟选项里是无法看到共享数据的更新的。   往state里添加一个数组叫todolist,通过state共享,做一个迷你版的todolist 欧博注册:Vuex与axios的封装和挪用 第10张     mutations里的方式可以传两个参数 欧博注册:Vuex与axios的封装和挪用 第11张 并在Home.vue里 欧博注册:Vuex与axios的封装和挪用 第12张 mutations里的函数可以传多个参数,第一个参数一定是状态治理state,之后的参数都来自于函数的实参。 欧博注册:Vuex与axios的封装和挪用 第13张 ③:getters------------->常用于盘算state状态治理某个值的数目(相当于是盘算属性),当被关联的state变量发生变化时,getters变量会重新盘算 欧博注册:Vuex与axios的封装和挪用 第14张 挪用用$store.getters.total 欧博注册:Vuex与axios的封装和挪用 第15张 ④:Actions专门卖力和后端接口打交道(见最后)     axios:(绝大多数公司都用) 是一个http请求工具,基于Promis的封装的  jquery用的已经很少了. axios不仅可以用在客户端,还可以用在node.js服务器. Eg:axios({ }).then(res=).catch(err)   安装方式:npm install axios;     3fengs.com-------------种种工具包网站. npm官方文档axios包里:   1.建立一个utils文件夹。 2.再建立一个fetch.js。 先引入欧博注册:Vuex与axios的封装和挪用 第16张

 

 

再建立axios实例: 欧博注册:Vuex与axios的封装和挪用 第17张 在找到请求拦截器:,把axios改成instance实例。 请求拦截器:在请求被发送出去之前,做一些验证事情。 欧博注册:Vuex与axios的封装和挪用 第18张 响应拦截器,同上,改成instance实例。 响应拦截器:在响应到达之前,先举行数据过滤 欧博注册:Vuex与axios的封装和挪用 第19张   最后导出instance--------------->export default instance;       调接口: ①:在对应组件引入axios, 欧博注册:Vuex与axios的封装和挪用 第20张 ②:在mounted里挪用axios(get请求入参用params,post用data) 欧博注册:Vuex与axios的封装和挪用 第21张     这样可以拿到接口的所有数据 1.请求拦截器的return若是没有,则无法响应会报错, 2.响应拦截器的return若是没有,则返回数据为undefined;   可以在对应的区域举行数据过滤和错误处理: 欧博注册:Vuex与axios的封装和挪用 第22张 以后还可以加token   ES6模块化语法里: 使用export 抛出,必须使用import{  } from ''举行引入. 使用export default {  }抛出,必须import xx from '' 举行引入。 在同一个模块中,有且仅有一个export default,可以没有。 在同一个模块中,export  可以不限个数.   在初始化调接口时,可以举行再次封装: 在utils文件夹在建立一个api.js。 ①: 欧博注册:Vuex与axios的封装和挪用 第23张 在对应的组件页面使用getData getData()函数运行之后的结果是一个promise工具,可以直接使用then方式。 欧博注册:Vuex与axios的封装和挪用 第24张 ②: 欧博注册:Vuex与axios的封装和挪用 第25张       欧博注册:Vuex与axios的封装和挪用 第26张   可以将http工具挂载在vue实例上 在入口文件main.js里: 欧博注册:Vuex与axios的封装和挪用 第27张 这样Vue实例下就多了一个内置工具的方式$http. 实例中挪用方式即可这样。(当拿到的数据不需要共享时可用)。 欧博注册:Vuex与axios的封装和挪用 第28张       只有mutations里的第一个形参才是state actions中的方式第一个形参并不是state,而是store工具 actions是vuex官方建议的,与后端接口对接的入口, 事情中,一样平常让那些需要被多个组件共享的后端数据,走actions 在actions中,可以直接修改state,然则不推荐这么做(无法在devtools中纪录显示) 欧博注册:Vuex与axios的封装和挪用 第29张

 

 

可以在状态治理的actions中这样使用actions,然则作者尤雨溪不建议这样使用。 欧博注册:Vuex与axios的封装和挪用 第30张 准确的方式: 欧博注册:Vuex与axios的封装和挪用 第31张 并在对应组件的mounted中如下挪用。 欧博注册:Vuex与axios的封装和挪用 第32张        ,

欧博注册

欢迎进入欧博注册(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。

版权声明

本文仅代表作者观点,
不代表本站Allbet的立场。
本文系作者授权发表,未经许可,不得转载。

评论