Vue学习笔记(6)

阅读数: 次 2022-11-10

文章导航

Vue学习笔记

Vuex …

Promise

简介

Promise是异步编程的一种解决方案。

处理异步事件一种很常见的场景应该就是网络请求了。
我们封装一个网络请求的函数，因为不能立即拿到结果，所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去，如果不是一个简单的网络请求，会给我们带来很大的麻烦。

使用

当我们开发中有异步操作时, 就可以给异步操作包装一个Promise，异步操作之后会有三种状态：

pending：等待状态，比如正在进行网络请求，或者定时器没有到时间；
fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()；
reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()；

基本使用

new Promise创建一个Promise对象,resolve和reject它们两个也是函数:

如果是成功的，那么通常我们会调用resolve(messsage)，这个时候，我们后续的then会被回调;
如果是失败的，那么通常我们会调用reject(error)，这个时候，我们后续的catch会被回调;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>
  // 1.使用setTimeout
  // setTimeout(() => {
  //   console.log('Hello World');
  // }, 1000)

  // 什么情况下会用到Promise?
  // 一般情况下是有异步操作时,使用Promise对这个异步操作进行封装
  // new -> 构造函数(1.保存了一些状态信息  2.执行传入的函数)
  // 在执行传入的回调函数时, 会传入两个参数, resolve, reject.本身又是函数
  new Promise((resolve, reject) => {
    setTimeout(() => {
      // 成功的时候调用resolve
      // resolve('Hello World')

      // 失败的时候调用reject
      reject('error message')
    }, 1000)
  }).then((data) => {
    // 1.100行的处理代码
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
    console.log(data);
  }).catch((err) => {
    console.log(err);
  })
</script>
</body>
</html>

链式调用

Promise的流程图中可以发现无论是then还是catch都可以返回一个Promise对象，所以我们直接通过Promise包装了一下新的数据，将Promise对象返回了。

Promise.resovle()：将数据包装成Promise对象，并且在内部回调resolve()函数；
Promise.reject()：将数据包装成Promise对象，并且在内部回调reject()函数；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<script>


  // 参数 -> 函数(resolve, reject)
  // resolve, reject本身它们又是函数
  // 链式编程
  new Promise((resolve, reject) => {

    // 第一次网络请求的代码
    setTimeout(() => {
      resolve()
    }, 1000)

  }).then(() => {
    // 第一次拿到结果的处理代码
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');
    console.log('Hello World');

    return new Promise((resolve, reject) => {

      // 第二次网络请求的代码
      setTimeout(() => {
        resolve()
      }, 1000)
    })
  }).then(() => {

    // 第二次处理的代码
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');
    console.log('Hello Vuejs');

    return new Promise((resolve, reject) => {

      // 第三次网络请求的代码
      setTimeout(() => {
        resolve()
      })
    })
  }).then(() => {

    // 第三处理的代码
    console.log('Hello Python');
    console.log('Hello Python');
    console.log('Hello Python');
    console.log('Hello Python');
    console.log('Hello Python');
  })
</script>
</body>
</html>

all方法使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>
  // 请求二一:
  // let isResult1 = false
  // let isResult2 = false
  // $ajax({
  //   url: '',
  //   success: function () {
  //     console.log('结果1');
  //     isResult1 = true
  //     handleResult()
  //   }
  // })
  // // 请求二:
  // $ajax({
  //   url: '',
  //   success: function () {
  //     console.log('结果2');
  //     isResult2 = true
  //     handleResult()
  //   }
  // })
  //
  // function handleResult() {
  //   if (isResult1 && isResult2) {
  //     //
  //   }
  // }


  Promise.all([
      // new Promise((resolve, reject) => {
      //   $.ajax({
      //     url: 'url1',
      //     success: function (data) {
      //       resolve(data)
      //     }
      //   })
      // }),
      // new Promise((resolve, reject) => {
      //   $.ajax({
      //     url: 'url2',
      //     success: function (data) {
      //       resolve(data)
      //     }
      //   })
      // })

    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({name: 'why', age: 18})
      }, 2000)
    }),
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({name: 'kobe', age: 19})
      }, 1000)
    })
  ]).then(results => {
    console.log(results);
  })
</script>
</body>
</html>

Vuex

简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单总结就是：Vuex提供了一个在多个组件间共享状态的插件，管理多个组件的公共数据(响应式)；
可以管理的内容：用户的登录状态、用户名称、头像、地理位置信息、商品的收藏、购物车中的物品等等；

单界面的状态管理

Vue已经帮我们做好了单个界面的状态管理；

State：不用多说，就是我们的状态。（可以当做就是data中的属性）
View：视图层，可以针对State的变化，显示不同的信息。
Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。

多界面状态管理

全局单例模式（大管家）

我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理；之后，每个视图，按照规定好的规定，进行访问和修改等操作；这就是Vuex背后的基本思想。

Vuex核心概念

State，Getters，Mutation，Action，Module

mutations 建议store内部调用，外部访问建议使用actions；

State单一状态树

英文名称是Single Source of Truth，也可以翻译成单一数据源（单例模式）;

你的状态信息是保存到多个Store对象中的，那么之后的管理和维护都会变得特别困难，所以Vuex使用了单一状态树来管理应用层级的全部状态，它能让我们以最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

使用vuex

import Vue from 'vue'
import App from './App.vue'
//使用vuex
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
	store,
}).$mount('#app')

App.vue文件

<template>
  <div id="app">
		<!-- 修改数字 -->
		<button @click="addition">+</button>
		<button @click="subtraction">-</button>
		<button @click="addCount(5)">+5</button>
		<button @click="addCount(10)">+10</button>
		<!-- 添加学生 -->
		<button @click="addStudent">添加学生</button>
		<!-- 修改信息 -->
		<button @click="updateInfo">修改信息</button>
		
    <h2>----------App内容----------</h2>
    <h2>{{$store.state.counter}}</h2>
		<h2>{{$store.state.students}}</h2>
    <h2>----------组件内容----------</h2>
		<hello-vuex/>
		
		<h2>----------App内容: info对象的内容是否是响应式----------</h2>
		<h2>{{$store.state.info}}</h2>

  </div>
</template>

<script>
import HelloVuex from './components/HelloVuex.vue'

export default {
  name: 'app',
  components: {
		HelloVuex,
  },
	methods: {
		addition() {
			this.$store.commit('increment')
		},
		subtraction() {
			this.$store.commit('decrement')
		},
		addCount(count) {
			// payload: 负载
			// 1.普通的提交封装
			// this.$store.commit('incrementCount', count)

			// 2.特殊的提交封装
			this.$store.commit({
				type: 'incrementCount',
				count
			})
		},
		addStudent() {
			const stu = {id: 114, name: 'alan', age: 35}
			this.$store.commit('addStudent', stu)
		},
		updateInfo() {
			this.$store.commit('updateInfo')
		},
		
	}
}
</script>

<style>

</style>

vuex的js文件

import Vue from 'vue'
import Vuex from 'vuex'


// 1.安装插件
Vue.use(Vuex)


const store = new Vuex.Store({
  state:{
		counter: 1000,
		students: [
			{id: 110, name: 'why', age: 18},
			{id: 111, name: 'kobe', age: 24},
			{id: 112, name: 'james', age: 30},
			{id: 113, name: 'curry', age: 10}
		],
		info: {
			name: 'kobe',
			age: 40,
			height: 1.98
		}		
	},
  mutations:{
		increment(state) {
			state.counter++
		},
		decrement(state) {
			state.counter--
		},
		incrementCount(state, payload) {
			// console.log(count);
			state.counter += payload.count
		},
		addStudent(state, stu) {
			state.students.push(stu)
		},
		updateInfo(state) {
			state.info.name = 'coderwhy'
		}
	},
  actions:{},
  getters:{}
})

// 3.导出store独享
export default store

子组件文件

<template>
  <div>
    <h2>{{$store.state.counter}}</h2>
		<h2>{{$store.state.students}}</h2>		
    <h2>{{$store.state.info}}</h2>
  </div>
</template>

<script>
  export default {
    name: "HelloVuex"
  }
</script>

<style scoped>

</style>

Getters基本使用

获取计算、变异后的state时，可以使用Getters；getters默认是不能传递参数的，如果希望传递参数，那么只能让getters本身返回另一个函数。

export default  {
  powerCounter(state) {
    return state.counter * state.counter
  },
  more20stu(state) {
    return state.students.filter(s => s.age > 20)
  },
  more20stuLength(state, getters) {
    return getters.more20stu.length
  },
  moreAgeStu(state) {
    // return function (age) {
    //   return state.students.filter(s => s.age > age)
    // }
    return age => {
      return state.students.filter(s => s.age > age)
    }
  }
}

Mutation状态更新

Vuex的store状态的更新唯一方式：提交Mutation；

Mutation主要包括两部分：

字符串的事件类型（type）
一个回调函数（handler）,该回调函数的第一个参数就是state。

import {INCREMENT} from "./mutations-types";

export default {
  // 方法
  [INCREMENT](state) {
    state.counter++
  },
  decrement(state) {
    state.counter--
  },
  incrementCount(state, payload) {
    // console.log(count);
    state.counter += payload.count
  },
  addStudent(state, stu) {
    state.students.push(stu)
  },
  updateInfo(state) {
    state.info.name = 'coderwhy'

    // 错误的代码: 不能在这里进行异步操作
    // setTimeout(() => {
    //   state.info.name = 'coderwhy'
    // }, 1000)

    // state.info['address'] = '洛杉矶'

    // Vue.set(state.info, 'address', '洛杉矶')
    // 该方式做不到响应式

    // delete state.info.age
    // Vue.delete(state.info, 'age')
  }
}

Action使用

因为Mutation中不能进行异步操作，所以Action是用来代替Mutation进行异步操作的，Action类似于Mutation；

context是和store对象具有相同方法和属性的对象，我们可以通过context去进行commit相关的操作, 也可以获取context.state等。

p也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.

Action的分发：

在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch，它也是支持传递payload。

Action返回的Promise：

Promise经常用于异步操作，所以在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject。

export default {
  // context: 上下文
  // aUpdateInfo(context, payload) {
  //   setTimeout(() => {
  //     context.commit('updateInfo')
  //     console.log(payload.message);
  //     payload.success()
  //   }, 1000)
  // },
  aUpdateInfo(context, payload) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        context.commit('updateInfo');
        console.log(payload);

        resolve('1111111')
      }, 1000)
    })
  }
}

Module模块

Vue使用单一状态树，那么也意味着很多状态都会交给Vuex来管理，当应用变得非常复杂时，store对象就有可能变得相当臃肿。

import Vue from 'vue'
import Vuex from 'vuex'

import {
  INCREMENT
} from './mutations-types'

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象
const moduleA = {
  state: {
    name: 'zhangsan'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
  getters: {
    fullname(state) {
      return state.name + '11111'
    },
    fullname2(state, getters) {
      return getters.fullname + '2222'
    },
    fullname3(state, getters, rootState) {
      return getters.fullname2 + rootState.counter
    }
  },
  actions: {
    aUpdateName(context) {
      console.log(context);
      setTimeout(() => {
        context.commit('updateName', 'wangwu')
      }, 1000)
    }
  }
}

const store = new Vuex.Store({
  state: {
    counter: 1000,
    students: [
      {id: 110, name: 'why', age: 18},
      {id: 111, name: 'kobe', age: 24},
      {id: 112, name: 'james', age: 30},
      {id: 113, name: 'curry', age: 10}
    ],
    info: {
      name: 'kobe',
      age: 40,
      height: 1.98
    }
  },
  mutations: {
    // 方法
    [INCREMENT](state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    },
    incrementCount(state, payload) {
      // console.log(count);
      state.counter += payload.count
    },
    addStudent(state, stu) {
      state.students.push(stu)
    },
    updateInfo(state) {
      state.info.name = 'coderwhy'

      // 错误的代码: 不能在这里进行异步操作
      // setTimeout(() => {
      //   state.info.name = 'coderwhy'
      // }, 1000)

      // state.info['address'] = '洛杉矶'

      // Vue.set(state.info, 'address', '洛杉矶')
      // 该方式做不到响应式

      // delete state.info.age
      // Vue.delete(state.info, 'age')
    }
  },
  actions: {
    // context: 上下文
    // aUpdateInfo(context, payload) {
    //   setTimeout(() => {
    //     context.commit('updateInfo')
    //     console.log(payload.message);
    //     payload.success()
    //   }, 1000)
    // },
    aUpdateInfo(context, payload) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          context.commit('updateInfo');
          console.log(payload);

          resolve('1111111')
        }, 1000)
      })
    }
  },
  getters: {
    powerCounter(state) {
      return state.counter * state.counter
    },
    more20stu(state) {
      return state.students.filter(s => s.age > 20)
    },
    more20stuLength(state, getters) {
      return getters.more20stu.length
    },
    moreAgeStu(state) {
      // return function (age) {
      //   return state.students.filter(s => s.age > age)
      // }
      return age => {
        return state.students.filter(s => s.age > age)
      }
    }
  },

  modules: {
    a: moduleA
  }
})

// 3.导出store独享
export default store


// 对象的解构
const obj = {
  name: 'why',
  age: 18,
  height: 1.88,
  address: '洛杉矶'
}

const {name, height, age} = obj;

项目结构

p但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?

pAction类似于Mutation, 但是是用来代替Mutation进行异步操作的.

网络请求封装(axios)

简介

功能特点

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据

对比

传统的Ajax是基于XMLHttpRequest(XHR)，但必须引入jQuery，很不方便；
官方在Vue1.x的时候, 推出了Vue-resource，但在Vue2.0后，不再继续更新和维护了；

请求方式

axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

使用

基本使用

// 1. 简单使用
axios({
	url: 'http://123.207.32.32:8000/home/multidata'
}).then(res => {
	console.log(res);
})


// 2. 传递参数
axios({
	url: 'http://123.207.32.32:8000/home/data',
// 对于get请求的参数拼接	
	params: {
		type: 'pop',
		page: 1
	}
}).then(res => {
	console.log(res);
})


// 3. 全局配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000

// 发送并发请求
axios.all([axios({
	url: '/home/multidata'
}),axios({
	url: '/home/data',
	params: {
		type: 'sell',
		page: 4	
	}
})]).then(axios.spread((res1, res2) => {
	console.log(res1);
	console.log(res2);
}))


// 4. 创建axios实例
const instance1 = axios.create({
	baseURL: 'http://123.207.32.32:8000',
	timeout: 10000
})

instance1({
	url: '/home/multidata'
}).then(res => {
	console.log(res);
})

instance1({
	url: '/home/data',
	params: {
		type: 'sell',
		page: 4	
	}
}).then(res => {
	console.log(res);
})

const instance2 = axios.create({
	baseURL: 'http://123.207.32.32:8080',
	timeout: 5000
})

常见配置

请求地址：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’},
响应的数据格式：responseType: ‘json’,

组件使用

<template>
  <div id="app">
		{{result}}
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'app',
  components: {
  },
	data(){
		return {
			result: ''
		}
	},
	// 使用生命周期函数判断组件是否创建成功
	created() {
		axios({
			url: 'http://123.207.32.32:8000/home/multidata'
		}).then(res => {
			console.log(res);
			this.result = res;
		})
	}
}
</script>

<style>

</style>

封装使用

request.js

import axios from 'axios'

// export function request(config){
// 	return new Promise((resolve, reject) => {
// 		// 创建axios的实例
// 		const instance = axios.create({
// 			baseURL: 'http://123.207.32.32:8080',
// 			timeout: 5000
// 		})
		
// 		// 发送网络请求
// 		instance(config)
// 		.then(res => {
// 			resolve(res);
// 		})
// 		.catch(err => {
// 			reject(err);
// 		})
		
// 	})
// }

//简写
export function request(config){
	// 创建axios的实例
	const instance = axios.create({
		baseURL: 'http://123.207.32.32:8000',
		timeout: 5000
	})
	
	// 也可以直接返回实例,因为实例是一个Promise类型
	return instance(config);
}

main.js

// 5. 封装一个request网络请求
import {request} from "./network/request.js";

//传三个参数时
// request({
// 	url: '/home/multidata'
// }, res => {
// 	console.log("封装--"+res);
// }, err => {
// 	console.log("封装--"+err);
// })

// 使用Promise时
request({
	url: '/home/multidata'
}).then(res => {
	console.log("封装--"+res);	
}).catch(err => {
	console.log("封装--"+err);	
})

拦截器

请求拦截中错误拦截较少，通常都是配置相关的拦截，可能的错误比如请求超时，可以将页面跳转到一个错误页面中。

响应的成功拦截中，主要是对数据进行过滤，响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。

export function request(config){
	// 创建axios的实例
	const instance = axios.create({
		baseURL: 'http://123.207.32.32:8000',
		timeout: 5000
	})
	
	// 请求拦截器
	instance.interceptors.request.use(config => {
		console.log(config);
		// 1.可以修改config中的一些配置
		// 2.在发送请求时,显示一个加载图标
		// 3.在网络请求中,判断是否携带某种特殊信息(登录(token))
		return config;
	}, err => {
		consloe.log(err);
	})
	
	// 响应拦截器
	instance.interceptors.response.use(res => {
		// console.log(res);
		return res.data;
	}, err => {
		console.log(err);
	})
	
	// 也可以直接返回实例,因为实例是一个Promise类型
	return instance(config);
}

本文作者： 腾飞
本文链接： https://www.tengfei.eu.org/article/f0d4a61e.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！