学习记录(day10-axios es8语法、axios 拦截器,router全局导航守卫,vuex基本语法,vuex全局引用)

[TOC]

1.1 axios es8语法

• 将发送ajax过程语法改变
• 连个关键字：async/await

methods: {
   async add() {
   		//经过解构，得到response对象,data数据
   		let response = await axios.get('/user')
   		//从response解构data属性
   		let {data} = await axios.get('/user')
   		//给解构属性起别名
   		let {data: 别名} = await axios.get('/user')
   }
}

1.2 axios 拦截器

• 发送ajax的先后，发送请求前(request)，响应后(response)进行程序拦截

axios.interceptors.request.user(config=>{
    return config
},error=>{})

axios.interceptors.response.use( response=>{
	//放行
	return response
} , error=>{
    //异常处理，若是没有返回值或return error
    return Promise.reject(error)
})

1.3 router 全局导航守卫

• 导航守卫:切换组件、阻止切换
• **全局守卫：**全部组件通用

//全局前置守卫：路由切换前执行
router.beforeEach((to,from,next) => {
	//放行
	next()        //跳转到默认路由to
    next('路径')   //跳转到指定路径
})


//全局后置守卫：路由切换后执行
router.afterEach((to,from) => {

})

• 路由独立守卫：某一个路由单独配置，给一个组件用router/index.js

{
    path:'/foo',
    component:Foo,
    beforeEnter:(to,from,next)=>{    //给当前路由配置"进入"拦截
        next()
    }
}

1.4 vuex 基本语法

什么是Vuex

Vuex是为了保存组件之间共享数据而诞生的，若是组件之间有要共享的数据，能够直接挂载到vuex中，而没必要经过父子组件之间传值，若是组件的数据不须要共享，此时，这些不须要共享的私有数据，没有必要放到vuex中；

只有共享的数据，才有权利放到vuex中；

组件内部私有的数据，只要放到组件的data中便可；

Vuex是一个全局的共享数据储存区域，就至关因而一个数据的仓库

• store/index.js内容 （脚手架生成的）

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {          //储存数据

  },
  mutations: {      //修改数据

  },
  actions: {        //触发mutation
      
  },
    
  modules: {      
      
  },
  getters: {      //得到数据

  }
})

• vuex 数据操做

得到： this.$store.state.属性

修改： this.$store.commit('函数',值)

执行： this.$store.dispatche('action函数',值)

得到： this.$sotre.getters.函数名

1.5 vuex 全局引用

//导入vuex中，解构出函数
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'

//使用的使用
...mapState(['属性'])

---

平常学习的总结，主要是为了本身之后看，固然你们有什么好的建议，欢迎评论留言。