Vuex和axios两部分
目录
07.（掌握）Vuex单界面到多界面状态管理切换（属性共享）
08.（掌握）vuex-devtools和mutations(方法共享)
06.（掌握）Vuex概念和作用解析
1.概念：Vuex是一个专门为Vue.js应用程序开发的状态管理模式。
2.理解：状态管理，这里的状态可以理解为一个变量的改变，能引起多个组件的改变，传统的方法可以通过Vue.prototype.myobj = myObj自己进行状态管理，但是这不能响应式：
3.管理什么状态？
1）如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。
2）比如用户的登录状态、用户名称、头像、地理位置信息等等。
3）比如商品的收藏、购物车中的物品等等。
4）这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的（待会儿我们就可以看到代码了，莫着急）。
07.（掌握）Vuex单界面到多界面状态管理切换（属性共享）
1.传统属性共享是父传子，利用props，如果层级复杂或者深，不方便传递，因此有了Vuex
2.如果不用props，就可以使用Vuex，步骤：
1）npm install vuex --save
2）src中新建store/index.js，并进行安装、创建和导出：
3）main.js导入
4）使用state中的值：<h2>{{$store.state.count}}</h2>
08.（掌握）vuex-devtools和mutations(方法共享)
1.需求，通过vuex实现方法的共享，传统的方法<button @click="add">+<button>
2.vuex官方示意图：
3.vuex通过mutations方法实现共享：
1）在vuex/index.js的mutations中写公用方法：
2）在组件中调用方法（ this.$store.commit('increment') ）：
09.（掌握）vuex-state单一状态树的理解
1.只建一个$store来管理所有的状态：
const store = new Vuex.Store({})
10.（掌握）vuex-getters的使用详解
1.五大属性之一——getters:相当于计算属性computed:
2.如，获取count的平方:
1)getters写计算属性（下图） 2）组件使用<p>{{$store.getters.powerCount}}</p>
3.三个需求，打印年龄大于15岁的学生，并计算人数（getters内方法可以互相使用），并打印年龄大于age的学生
1）state定义数组：
2）大于15岁的学生使用filter函数，计算人数调用getters内部方法（state,getters）,需要传递参数的时候要返回function(){}:
App.vue:
<p>{{$store.getters.more15Stu}}</p>
<p>满足条件的学生的个数是：{{$store.getters.more15StuLength}}</p>
<p>打印满足年龄大于？的学生：{{$store.getters.moreAgeStu(3)}}</p>
11.（掌握）vuex-mutations的携带参数
1.Vuex的store的状态更新的唯一方式：提交Mutation
2.传递参数： this.$store.commit('incrementStudent',student)
1）App.vue:
<button @click="addStudent({id:115,name:'tortoise',age:55})">addStudent</button>
...
addStudent(student){
this.$store.commit('incrementStudent',student)
}2)mutations方法的第二个参数可以传递数据:
12.（掌握）vuex-mutations的提交风格
App.vue两种风格的区别：
| this.$store.commit('incrementCount',count) | 1.count是5 2.index.js中： incrementCount(state,count){ state.count += count }, |
| this.$store.commit({ type:"incrementCount", count }) | 1.count是对象{type: "incrementCount", count: 5} 2.index.js中： incrementCount(state,payload){ state.count += payload.count } |
13.（掌握）vuex-数据的响应式原理
1.提前定义好的属性（如Info的name和age），在state里都是响应式的，如Info:{name:"kobe" , age:18},修改的话可以直接响应式变化：updateInformation(state){ state.Info.name = "ws" }
2.但是没有提前定义好的属性，不是响应式的，如对Info对象增加属性：
updateInformation(state){ state.Info['address'] = "洛杉矶" }，Info对象会增加address属性，但是界面并不会响应式刷新
3.解决办法，利用Vue.set()的响应式方法进行添加（或Vue.delete()）：
14.（掌握）vuex-mutations的类型常量
（略）
15.（掌握）vuex-actions的使用详解
1.如果mutations的方法内部由异步操作，虽然视图会响应式刷新内容，但是devtools插件不会立即响应数据刷新：
2.解决方案：在actions中写，actions类似mutations，但是可以进行异步操作：
3.Actions除了可以处理异步操作以外，还可以返回Promise对象，进行执行完毕状态的监控
App.vue和index.js代码：
——App调用index，index返回Promise，App用Promise对象.then()获取返回的状态
16.（掌握）vuex-modules使用详解
1.modules中可以实现套娃（index.js部分：）：
17.（掌握）vuex-store文件夹的目录组织
index.js中除了state以外，全部把对象抽离出去，再import进来
文件夹结构：
actions.js:
09day
01.（了解）网络请求模块的选择-axios
1.四种网络模块
2.为什么选择axios (ajax i/o system):
在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
3.安装axios：npm install axios --save
02.（掌握）axios框架的基本使用
1.axios请求方式
03.（掌握）axios发送请求和发送并发请求
1.发送get请求：
axios({
url: 'http://localhost:8081/Scene/Production_1m7m3dtile.json',
}).then(res => {
console.log(res);
});2.发送post请求：
axios({
url: 'http://123.207.32.32:8000/home/data',
params: {
type: 'pop',
page: 1
}
}).then(res => {
console.log(res);
});3.合并发送，全部成功之后再返回：
// axios.all([axios(),axios()])
// .then(res =>{}) 或.then(axios.spread((res1,res2) =>{}))
axios.all([axios({
url: 'http://localhost:8081/Scene/Production_1m7m3dtile.json',
}), axios({
url: 'http://123.207.32.32:8000/home/data',
params: {
type: 'pop',
page: 1
}
})])
.then(axios.spread((res1, res2) => {
console.log(res1)
console.log(res2)
}))04.（掌握）axios配置信息相关
1.全局配置：axios.defaults.baseURL = ‘123.207.32.32:8000’
2.常见的配置选项
| 请求地址 | url: '/user', |
| 请求类型 | method: 'get', |
| 请根路径 | baseURL: 'http://www.mt.com/api', |
| 请求前的数据处理 | transformRequest:[function(data){}], |
| 请求后的数据处理 | transformResponse: [function(data){}], |
| 自定义的请求头 | headers:{'x-Requested-With':'XMLHttpRequest'}, |
| URL查询对象 | params:{ id: 12 }, |
| 查询对象序列化函数 | paramsSerializer: function(params){ } |
| request body data: | { key: 'aa'}, |
| 超时设置s | timeout:1000, |
| 跨域是否带 | Token withCredentials: false |
| 自定义请求处理 | adapter: function(resolve, reject, config){}, |
| 身份验证信息 | auth: { uname: '', pwd: '12'}, |
| 响应的数据格式 | json / blob /document /arraybuffer / text / stream responseType: 'json', |
05.（掌握）axios实例和模块封装
1.需求：有时候请求的不止一个服务器，如果用同一个baseUrl并不合适，因此可以采用实例化
2.模块封装（终点是方法三），需求：如果在每个.vue组件中导入（import axios from 'axios'）和使用axios({})，导致维护非常困难，一旦换第三方框架，修改太多，正确的做法是统一放在一个地方去封装起来:
1）src中建network文件夹，建文件request.js
2）代码如下，有两种方法：
方法一：函数回调-----------------------------------------------------------------------
设置函数回调，在request.js中传入三个函数：
import axios from 'axios'
//方法1设置回调函数把结果传出去：
export function request(config, success, failure) {
const instance = axios.create({
baseURL: 'http://152.1xx.xxx.xxx:7878/api/m5',
timeout: 5000
})
instance(config)
.then(res => {
success(res);
})
.catch(err => {
failure(err)
})
}main.js中导入，并传入所需的三个函数：
import { request } from './network/request'
request({
url: '/home/multidata',
}, res => {
console.log(res);
}, err => {
console.log(err);
})方法二：return new Promise对象-----------------------------------------------------------------------
request.js中通过new Promise，再通过main.js.then()：
方法三（终极）：axios其实是一个Promise----------------------------------------------------
对方法二的request.js进行改进：
main.js不变：
06.（掌握）axios的拦截器的使用
1.拦截器：用于每次请求或者得到响应后，进行对应的处理。一共4个拦截：
请求成功
请求失败
响应成功
响应失败
2.请求拦截使用场景：
1）比如config中的一些信息不符合服务器的要求
2）比如每次发送网络请求时，都希望在界面中显示一个请求图标动画
3）用户必须登录，判断用户是否有token，如果没有token跳转到login页面
4）请求拦截中错误拦截较少，通常都是配置相关的拦截
3.响应拦截使用场景
1）响应的成功拦截中，主要是对数据进行过滤。如只需要response.data
2)响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。
4.request.js中详细代码：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
