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.项目结构

转存失败重新上传取消