七天学完Vue之第七天学习笔记（tabber与Promise与Vuex）

第七天 （tabber与Promise与Vuex）

1.10.1. tabber的制作

• 动态获取活跃状态

1.使用计算属性，判断当前路由与保存的path是否一致，一致的状态激活

computed:{
		isActive() {
			return this.$route.path.indexOf(this.path) !== -1
		}
}

2.传入path（传入的字符串，不需要绑定）

<tab-ber-item path="/home" activeColor="blue">
	<img src="./assets/img/tabber/shouye.svg" alt="图片不见了" slot='item-icon'>
	<img src="./assets/img/tabber/shouye_g.svg" alt="图片不见了" slot='item-icon-ative'>
	<p slot="item-text">首页</p>
</tab-ber-item>

• 动态的获取颜色

1.使用计算属性：（首先判断isActive，因为需要与图片一直，若为真，动态获取传入的颜色）

props: {
	 		path: String,
			activeColor: {
				type: String,
				default: 'rgb(128, 239, 135)'
			}
	 },

 computed:{
		isActive() {
			return this.$route.path.indexOf(this.path) !== -1
		},
		activeStyle() {
			return this.isActive ? {color: this.activeColor} : {}
		} 
	 },
	 methods:{
		 itemClick() {
			 this.$router.replace(this.path)
		 }
	 }

2.传入颜色

<tab-ber-item path="/profile" activeColor="blue">
	<img src="./assets/img/tabber/gerenzhongxin.svg" alt="图片不见了" slot='item-icon'>
	<img src="./assets/img/tabber/gerenzhongxin_g.svg" alt="图片不见了" slot='item-icon-ative'>
	<p slot="item-text">我的</p>
</tab-ber-item>

1.10.2. Promise

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

链式编程
• 什么时候会用到Promise

一般情况下，有异步操作时。使用Promise对异步操作封装。

• Promise的格式

对于异步操作的步骤 例如 setTimeout这种

new Promise(  (resolve, reject) => {
		异步函数{
			resolve(data)
		}
}).then(  (data) => {
	针对异步函数的内容，做处理
	加入处理完，还有异步函数（这里只写处理数据，把这里的异步函数拿到下一个Promise）
	return new Promise(  (resolve, reject) => {
		上面那个异步函数{
			//加入这里处理失败
			reject( data222)
		}
		} ).catch( (data222 ) => {
			处理失败
			} )
		
	} )

也可以在 then( data1 => {}, data2 =>{} )

data1 == resolve data2 == reject

1.10.3. Vuex

1.安装 vuex

npm install vuex@3.0.1 --save

• Vuex格式

vuex专门为 vue.js应用程序开发的状态管理模式

我理解是全局变量 在mian.js中导入 配置的store Vue.prototype.$store = store

配置方法

import Vue from ‘vue’
import Vuex from ‘vuex’

//1.安装插件

Vue.use(Vuex)

//2.创建对象

const store = new Vuex.Store({
state:{},
mutations:{},
actions:{},
getters:{},
modules:{} })

//3.导出store对象

export default store

• state

1. 类似 data 用来存变量。这里的属性都会加入到响应式系统中，当属性发生改变，会通知所有界面中用到该i属性的地方。让界面发生刷新

2. 在mutations为state数据时，低版本加入的数据，可能不是响应式，可以用这种方法

 Vue.set(state.info, 'addd', '洛杉矶')添加 Vue.delete(state.info, 'age')

组件使用规则： $store.state.变量名

• mutations

用来存方法，这种修改数据的方法会被记录

组件使用的规则：
在组件方法中创建包括
2种提交方式：

A:this.$store.commit('mutations中定义的方法名，Payload')
Payload： 传递的一些参数

B:this.$store.commit({
	type: 'mutations中定义的方法名',
	Payload
})

B这种提交方式，提交的是一个对象的形式
•	mutations的常量形式
1.创建 mutations.js文件  ，
将 mutations中用到的方法 名 都以此格式添加别名：
export const 别名 = ‘方法名’

2.分别在 用到的组件和 store所在文件  导入  mutations.js文件
import  *  from ‘ mutations.js文件路径’

3.在 store的  mutations中 方法 可以以此名存在 ： [别名]，在用到的组件也用此别名

• getters

类似computed计算属性 当数据需要进行筛选返回的时候调用

例子：
getters:{
		more20stu(state) {
			return state.students.filter( s => s.age!=20)
		},
		more20stulen(state, getters) {
			return getters.more20stu.length
		},
		moreAgestu(state) {
			return function(age){
				return state.students.filter(s => s.age>age)
			}
		}
	},

• actions

当操作中 有异步操作时。需要 经过actions

在 actions中写异步操作，通过 context.commit(‘dif’)调用mutations中的方法。在 组件中 通过
this.$store.dispatch(‘aUpdata’, ‘测试哈哈哈哈’)调用 action还可以在
actions的方法里调用return Promise在组件里调用此方法的后面then（），进行回调

• axios

1.创建 request.js文件 • 封装 request 导出 request函数 function request(config){…}
创建 axios实例 const instance = axios.create({
baseURL: ’ 接口地址’ , timeout: 3000})

拦截函数instance.interceptors.响应/请求( config => {…}, err
=>{…} ) return instance(config)
在main.js文件 里 导入 import request from ‘request文件地址’ 使用request({url: 接口地址}) .then( res=>{…}).catch( ree =>{…})

• axios的拦截器
• 请求拦截

请求的config中的信息不符合服务器要求。 每次发送网络请求，都希望在界面显示一个加载图标。加载成功后在响应拦截取消
携带特殊信息时，在这里判断，例如判断是否登录，看看token

instance.interceptors.request.use(config => {
			console.log(config)
			return config
		}),err => {
			console.log(err)
		}

谢谢观看~