Vue学习第九天
Vue09
一.
Promise的使用
一般情况下是有异步操作时，使用Promise对这个异步操作进行封装。
new -> 构造函数（1.保存了一些状态信息 2.执行传入的函数）
在执行传入的回调函数时，会传入两个参数，resolve，reject本身又是函数
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Hello World");
},1000)
}).then((data) => {
console.log(data);
return new Promise((resolve, reject) => {
setTimeout(() =>{
resolve("123456")
},1000)
}).then((data)=>{
console.log(data);
})
})
这里的setTimeout可以看成异步操作的函数，通过这个函数取得了data放到resolve里传到then里处理data属性
new Promise((resolve, reject) => {
setTimeout(()=>{
reject("errrrrrrrrrrrrrrrrrrrrrrrrr")
})
}).catch(err=>{
console.log(err);
})
请求失败可以调reject函数在catch中处理数据
二.
Promise三种状态
①pending：等待状态，比如正在进行网络请求，或者定时器没有到时间
②fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()
③reject：拒绝状态，当我们回调了reject时，就处于该状态，并且会回调.catch()
Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。
三.
Vuex
使用Vuex
1.安装Vuex 运行时依赖
npm install vuex --save
2.创建store文件夹，新建index.js
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
counter : 0
}
})
export default store;
3.在main.js中导入store，添加Vue实例中
4.在组件中使用$store.state.counter取出counter
5.
有同步操作在Mutations里完成，有异步操作在Actions里完成。Devtools可以跟踪State改变的状态便于多界面中跟踪调试，所以不建议直接修改State而是完成状态图里的步骤。
6.如果需要改变store里的值，需要在mutations里执行改变值的方法，之后在需要的地方用commit方法提交。
mutations: {
increment(state){
state.count++
},
decrement(state){
state.count--
}
}
methods: {
increment(){
this.$store.commit("increment")
},
decrement(){
this.$store.commit("decrement")
}
}
7.
8.
有时候，我们需要从store中获取一些state变异后的状态
state: {
count: 0,
students: [
{id: 1,name: "111",age: 11},
{id: 2,name: "222",age: 22},
{id: 3,name: "333",age: 33},
{id: 4,name: "444",age: 44}
]
},
getters: {
getAllStudents(state){
return state.students;
},
getAgeGT20Students(state){
return state.students.filter(s => s.age > 20);
},
getAgeGT20Length(state, getters){
return getters.getAgeGT20Students.length;
},
getAgeGT(state){
return (age) => state.students.filter(s => s.age > age);
}
}
<h2>----------Students---------------</h2>
<h2>{{$store.getters.getAllStudents}}</h2>
<h2>----------年龄大于20Students------</h2>
<h2>个数：{{$store.getters.getAgeGT20Length}}</h2>
<h2>{{$store.getters.getAgeGT20Students}}</h2>
<h2>----------年龄大于30---------------</h2>
<h2>{{$store.getters.getAgeGT(30)}}</h2>
9.
Mutation
10.
Action
希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.
-
context是和store对象具有相同方法和属性的对象.
-
也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.
mutations: {
updName(state,payload){
state.name = payload;
}
},
actions: {
updName(context,payload){
setTimeout(()=>{
context.commit("updName",payload);
},2000)
}
}
methods: {
updName(){
this.$store.dispatch("updName","lisi")
}
}
通过Promise完成异步操作。
actions: {
updName(context,payload){
new Promise(resolve => {
setTimeout(()=>{
context.commit("updName",payload);
},2000)
})
}
}
methods: {
updName(){
this.$store.dispatch("updName","lisi").then(()=>{
console.log("信息更改成功");
})
}
}
11.
Module
-
Module是模块的意思, 为什么在Vuex中我们要使用模块呢?
-
Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
-
当应用变得非常复杂时,store对象就有可能变得相当臃肿.
-
为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等
-
12.
对象的解构
本来传入context现在传入三个对象，因为我只需要这三个对象，context中还有其它对象用不着。
13.项目结构