一、数据交互（axios）
1.1概念
axios : 读音 阿克西奥斯河
它并不是vue独有的插件。
axios是一个HTTP的库，基于promise创建的
一般vue中或者react中进行数据交互，我们可以调用这个库
易用、简洁且高效的http库(基于promise创建的)
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
1.2官网地址
中文文档： http://www.axios-js.com/
npm : https://www.npmjs.com/package/axios
1.3特点
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF(跨站请求伪造)
1.4安装
npm install axios
+ axios@0.21.1
1.5 直接调用方法（配置对象）api方法
axios({
url:'//要链接的地址',
method:'get/post',//交互方式 如果是get可以省略
//如果你是get请求
params:{
//要传入的参数
}
//如果是post请求
data:{
//要传入的参数
}
})
.then((res)=>{
//res 成功之后的响应
})
.catch((err)=>{
//err 错误响应
//http状态码 非200的时候进入
})
1.6 get()方法
axios.get('url地址',{
params:{
//要传入的参数
}
})
.then((res)=>{
//res 成功之后的响应
})
.catch((err)=>{
//err 错误响应
//http状态码 非200的时候进入
})
1.7post()方法
axios.post('url地址',{
//要传入的参数
})
.then((res)=>{
//res 成功之后的响应
})
.catch((err)=>{
//err 错误响应
//http状态码 非200的时候进入
})
1.8 async await方法
强制转同，按照我的顺序调取接口
async function getUser() {
try {
//成功时候的执行
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
//错误拦截
console.error(error);
}
}
1.9 局部调用axios
<template>
<div>
<h1>axios案例</h1>
</div>
</template>
<script>
//引入核心库
import axios from "axios";
export default {
data() {
return {};
},
mounted() {
//页面一加载调用接口
// axios({
// url:'http://jsonplaceholder.typicode.com/posts',
// })
// .then(res=>{
// console.log(res,'成功之后的响应');
// })
// .catch(err=>{
// console.log(err,'错误捕获');
// })
//axios.get()
axios
.get("http://jsonplaceholder.typicode.com/posts")
.then((res) => {
console.log(res, "成功之后的响应");
})
.catch((err) => {
console.log(err, "错误捕获");
});
},
};
</script>
<style scoped></style>
1.10 全局调用axios
main.js
//引入axios核心库
import axios from 'axios'
// 把当前核心库挂载到Vue原型上
Vue.prototype.$axios = axios
1.11 如何最新版的脚手架中解决跨域问题
- 上线之后跨域问题谁解决？？？
后端去解决或者，服务器解决
- 创建自定义配置项
创建文件====vue.config.js
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
- 官方配置项文档
https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
- 开发环境下解决跨域问题
vue.config.js
//这就是vue的配置项
module.exports ={
devServer:{
//解决跨域问题配置
//配置代理
proxy:'你要解决跨域的地址'
}
}
注意点： ！！！！配置文件发生变化一定要重启前端服务！！！
三、Vuex(状态管理)
3.1 概念
vuex是状态管理。指的是多个组件共享一个数据，那么我们可以创建一个仓库统一去管理当前的所有数据。也就是共享仓库的概念。
-----------------------
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
------------------
vuex是响应式的数据变化。一个组件修改了值，所有的地方都跟着发生变化
3.2 官网
https://vuex.vuejs.org/zh/
3.3使用场景
vuex 适应于大型的单页应用
如果你的项目不够复杂，你根本想不到用vuex,那就别用！！！
如果你发现，用它真香，那就自然而然调用
它的根本目的：用于管理数据（多个组件共享一个数据！！！）
3.4 安装
一、创建项目的时候，就选择安装vuex
它会把默认的配置都给你配好，包括文件和文件夹
二、通过自己下载并配置
npm install(i) vuex
并没有默认的文件以及文件夹
3.5 配置基础仓库
store=>index.js
//引入核心库
import Vue from 'vue'
//引入状态库
import Vuex from 'vuex'
//Vuex是个对象，里面有仓库属性和辅助性函数
//new Vuex.Store() 实例化之后得到了仓库上所有的属性和方法
//调用插件
Vue.use(Vuex)
// console.log(new Vuex.Store(),'？？？？');
export default new Vuex.Store({
state:{//唯一的数据管理
name:'巧克力1'
}
})
main.js
//引入封装好的仓库
import store from './store'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
3.6 注意项
vuex 不能刷新，因为一刷新就回到初始状态
面试题:
vuex和离线存储有什么区别？？？？
相同点:都可以进行数据的存储
不同点：vuex一变化，其他使用数据的地方都跟着发生变化。离线存储数据发生变化，必须要刷新（重新取值，它没有响应式）才能获取新的数据。但是vuex一刷新就回到初始状态。
真正做项目的过程中结合使用！！！
3.7 Vuex的核心属性
-
state
- 概念
state是唯一数据源，用来管理所有的层级数据- 使用方式
state:{ 属性值:'' } -
mutations
- 概念
修改state的唯一方式- 使用方式
视图 通过commit去触发一个mutation this.$store.commit('mutation_TYPE',payload) 仓库 mutations:{ mutation_TYPE(state){ //可以修改state } } -
actions
- 概念
它和mutation很类似 一、它不能直接修改state 二、它可以操作异步方法- 使用方式
视图 通过dispatch去触发一个action this.$store.dispatch('action_TYPE',payload) 仓库 mutations:{ mutation_TYPE(state,payload){ //可以修改state } } actions:{ action_TYPE(context){ //这个context代表对象，对象中包含了属性和方法 context.commit('mutation_TYPE',payload) } 或者 action_TYPE({commit}){ commit('mutation_TYPE',payload) } } -
modules 模块
- 概念
它是为了解决state臃肿的问题 -
getters
- 概念
具有缓存效果 做为视图层和state属性之间的中间层存在- 用法
getters:{ 名字(state){ return state.属性 } }
3.8 辅助性函数
3.8.1state
它是vuex的唯一数据源
mapState（很少用！！！）
import {mapState} from 'vuex'
computed:{
...mapState(['仓库中state值'])
...mapState({
想要渲染的名字:state=>state.值
})
}
3.8.2getters
相当于计算属性。它作为，state和视图的中间层存在。它具有缓存效果
mapGetter
import {mapGetters} from 'vuex'
computed:{
...mapState(['仓库中getters值1','仓库中getters值2',...])
...mapState({
想要渲染的名字:geter=>getter.值
})
}
3.8.3 mutations
它是修改state的唯一方式，同步的
mapMutations
import {mapMutations} from 'vuex'
methods:{
...mapMutations(['mutations名字一致']),
...mapMutations({
'自定义函数名称':'mutations名字'
})
}
3.8.4 actions
它不能直接修改state,它只能commit一个mutations
它可以操作异步方法
mapActions
import {mapActions} from 'vuex'
methods:{
...mapActions(['actions名字一致']),
...mapActions({
'自定义函数名称':'actions名字'
})
}
- 概念
作者担心你直接触发行动提交mutation比较麻烦。
它在代码上给你进行了优化。用的就是辅助性函数
错误集锦
unknown mutation type: changename
一、mutation名字不对
二、没有设置mutation名字
unknown action type: changenum
一、action名字不对
二、没有设置action名字
