学习记录(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(['属性'])