在上一篇介绍使vue-cli3搭建了项目，并添加了一些基础的配置，现在就来和大家一起将项目需要用到的工具准备好。vue-cli在上一篇已经说了，这边就不重复了，

axios

安装

npm install axios

封装导入

在src里面新建api文件夹，新建index.js文件
在这里插入图片描述

最后将其导出
在这里插入图片描述
然后我们就可以在同级文件夹，建对应接口文件并将index中导出的repuest引入

在最后我们在对应组件，导入对应接口，并调用就可以了
在这里插入图片描述

vuex

安装

npm install vuex --save

引入

我们在src下面新建store文件夹，里面新增四个文件，分别为index.js/action.js/getter.js和mutation.js

index.js文件我们引入vuex等所需要的，然后其他三个文件，和定义state
在这里插入图片描述
action.js是当我们需要异步修改state里面属性的时候，需要用到action，但是最终都是通过mutation去修改的

getter.js就相当于我们组件的计算属性，可以及时获取到state里面的属性值

mutation.js就是我们最终修改state里面的值的唯一途径
在这里插入图片描述
最后在main.js中导入

使用

具体怎么去使用呢？首先我们去修改state里面的值
在这里插入图片描述
这便是给state里面的loginInfo复制一个新的对象，通过dispatch去调用mutation里面的login方法。

然后我们怎么去取
第一直接取：
在这里插入图片描述
直接再组件的created里面取出来，再复制给组件定义的变量，
第二监听state里面属性变化:
//利用计算属性
computed: {
listData() {
return this.$store.state.listData;
}
},
//监听执行
watch: {
listData(val) {
写上你需要的东西
}
},