Vuex与axios的封装和调用
Vuex状态管理
状态就是数据。 在react里有个Flux的数据流管理(单向数据流)
作用1:实现组件之间的数据共享。
作用2:用于缓存。(避免当用户频繁点击,页面不断调接口)
先安装状态管理工具
npm install vuex -S
1.在Src文件夹里创建一个store文件夹。
2.创建一个index.js的文件,里面引入vuex,如下
再在main.js入口文件里引入状态管理.
store里的各个选项的含义:
①:state----->要被共享的数据,都放在state中
![](https://img2020.cnblogs.com/blog/2080560/202007/2080560-20200718152320245-1753149439.png)
在需要引用的地方通过$store.state.msg对应的key值,即可取到共享的数据.
![](https://img2020.cnblogs.com/blog/2080560/202007/2080560-20200718152446492-1018052516.png)
console.log(this.$store)----------->一个Store类,里面有各种键值对
state、mutations、getters、actions、modules等等,里面有个key为state的键值对,通过this.$store.state可以找到vuex中state里所有的数据.
②:mutations---------->是用于改变与修改state的,当state被修改完成,页面视图自动更新。(mutations里的每个方法的第一个形参都为state)
作者尤雨溪不建议用这种方式直接修改共享的state数据.
建议写法:
Store这个类就好比整个Vue的类一样,当你想调用Store这个类里的方法时,在Store中就必须通过commit去提交一个字符串,并在store中寻找对应字符串的函数去触发,如上图。函数如何执行就在state中定义了
状态管理是一种单向数据流
dev-tools的安装:
用于配合vuex进行代码的调试工作.如果使用之前那种强制更改state共享数据的方法,则在调试工具(F12)里的vue工具中,第二个闹钟选项里是无法看到共享数据的更新的。
往state里添加一个数组叫todolist,通过state共享,做一个迷你版的todolist
mutations里的方法可以传两个参数
并在Home.vue里
mutations里的函数可以传多个参数,第一个参数一定是状态管理state,之后的参数都来自于函数的实参。
③:getters------------->常用于计算state状态管理某个值的数量(相当于是计算属性),当被关联的state变量发生变化时,getters变量会重新计算(接受的第一个形参为state)
调用用$store.getters.total
④:Actions专门负责和后端接口打交道(见最后)
(actions和mutations的区别,mutations中的函数只能同步执行,而actions中的函数可以异步执行,如ajax请求)
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。
先引入
![](https://img2020.cnblogs.com/blog/2080560/202007/2080560-20200718153002271-2068902779.png)
再创建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方法。
②:
上面这两步本可以直接一步export出去,但是为什么要分成两步呢,因为在一些不是Vue为this的环境中,如状态管理,无法使用挂载在Vue实例下的$http方法调用api,这样就可以应用上图中的上面一步的函数,按需加载
在store文件夹里的index.js文件,只能通过引用上面模块才可以使用该文件里的api函数:
import {getData} from ' @/utils/api'
可以将http对象挂载在vue实例上
在入口文件main.js里:
这样Vue实例下就多了一个内置对象的方法$http.
实例中调用方法即可这样。(当拿到的数据不需要共享时可用)。
mutations里的第一个形参才是state
actions中的方法第一个形参并不是state,而是store对象
actions是vuex官方建议的,与后端接口对接的入口,
工作中,一般让那些需要被多个组件共享的后端数据,走actions
在actions中,可以直接修改state,但是不推荐这么做(无法在devtools中记录显示)
![](https://img2020.cnblogs.com/blog/2080560/202007/2080560-20200718154830971-1777663455.png)
可以在状态管理的actions中这样使用actions,但是作者尤雨溪不建议这样使用。
正确的方法:
并在对应组件的mounted中如下调用。