Vuex与axios的封装和调用


.Net Core+Nginx实现项目负载均衡

Vuex状态管理

状态就是数据。    在react里有个Flux的数据流管理(单向数据流)
作用1:实现组件之间的数据共享。
作用2:用于缓存。(避免当用户频繁点击,页面不断调接口)
 
 
先安装状态管理工具
npm install vuex -S
 
1.在Src文件夹里创建一个store文件夹。
2.创建一个index.js的文件,里面引入vuex,如下
 
再在main.js入口文件里引入状态管理.

 
 

store里的各个选项的含义:

①:state----->要被共享的数据,都放在state中

在需要引用的地方通过$store.state.msg对应的key值,即可取到共享的数据.

②:mutations---------->是用于改变与修改state的,当state被修改完成,页面视图自动更新。(mutations里的每个方法的第一个形参都为state)
作者尤雨溪不建议用这种方式直接修改共享的state数据.

建议写法:
   

 
状态管理是一种单向数据流


 
 
dev-tools的安装:

用于配合vuex进行代码的调试工作.如果使用之前那种强制更改state共享数据的方法,则在调试工具(F12)里的vue工具中,第二个闹钟选项里是无法看到共享数据的更新的。
 
往state里添加一个数组叫todolist,通过state共享,做一个迷你版的todolist

 
 
mutations里的方法可以传两个参数

并在Home.vue里

mutations里的函数可以传多个参数,第一个参数一定是状态管理state,之后的参数都来自于函数的实参。

③:getters------------->常用于计算state状态管理某个值的数量(相当于是计算属性),当被关联的state变量发生变化时,getters变量会重新计算

调用用$store.getters.total

④: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。
先引入

 

 

聊聊Java中的异常及处理

再创建axios实例:

在找到请求拦截器:,把axios改成instance实例。
请求拦截器:在请求被发送出去之前,做一些验证工作。

响应拦截器,同上,改成instance实例。
响应拦截器:在响应到达之前,先进行数据过滤
 
最后导出instance--------------->export default instance;      
调接口:
①:在对应组件引入axios,

②:在mounted里调用axios(get请求入参用params,post用data)
   
这样可以拿到接口的所有数据
1.请求拦截器的return如果没有,则无法响应会报错,
2.相应拦截器的return如果没有,则返回数据为undefined;  
可以在对应的区域进行数据过滤和错误处理:

以后还可以加token
 
ES6模块化语法里:
使用export 抛出,必须使用import{  } from ''进行引入.
使用export default {  }抛出,必须import xx from '' 进行引入。
在同一个模块中,有且仅有一个export default,可以没有。
在同一个模块中,export  可以不限个数.
 
在初始化调接口时,可以进行再次封装:
在utils文件夹在创建一个api.js。
①:

在对应的组件页面使用getData
getData()函数运行之后的结果是一个promise对象,可以直接使用then方法。

②:
     

 
可以将http对象挂载在vue实例上
在入口文件main.js里:

这样Vue实例下就多了一个内置对象的方法$http.
实例中调用方法即可这样。(当拿到的数据不需要共享时可用)。

 
   
只有mutations里的第一个形参才是state
actions中的方法第一个形参并不是state,而是store对象
actions是vuex官方建议的,与后端接口对接的入口,
工作中,一般让那些需要被多个组件共享的后端数据,走actions
在actions中,可以直接修改state,但是不推荐这么做(无法在devtools中记录显示)

 

 

可以在状态管理的actions中这样使用actions,但是作者尤雨溪不建议这样使用。

正确的方法:

并在对应组件的mounted中如下调用。

 
 
 
 

js中实现继承的方法

  • 分享:
评论
还没有评论
    发表评论 说点什么