學習記錄(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(['屬性'])

---

平常學習的總結，主要是爲了本身之後看，固然你們有什麼好的建議，歡迎評論留言。