Vuex与axios的封装和调用

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值，即可取到共享的数据.

 

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。

先引入

 

 

再创建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中记录显示）

 

 

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

正确的方法：

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