1.async 异步操作
-
在异步调用时外层必须有一个函数
-
并且这个函数被 async 修饰
-
调用方法被 await 修饰
<script> methods: { async findAll(){ // 使用结构进行拆分 let {status,data} = axios.get('/student'); console.info(status); console.info(data); }, </script>
2.拦截器
- 对请求或响应进行拦截
<script>
// 请求拦截器
axios.interceptors.request.use(config => {
config.headers.Aothorization = '设置请求头'
// request.getHeader("Authorization"); 在后台进行接收
return config;
},error => {
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(response => {
return response;
},error => {
return Promise.reject(error);
});
</script>
3.导航守卫
- 维护导航间的跳转,取消(组件是否跳转)
// 前置导航守卫
router.beforeEach((to, from, next) => {
next();
})
// 后置导航守卫
router.afterEach((to, from) => {
})
4.Vuex
-
Vuex是一个专门为Vue.js应用程序开发的状态管理模式
-
Vuex间的数据管理
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: {// 保存的基本数据 username :'jack', password :'123' }, mutations: { updateUsername(state,value){// 通过函数对基本数据进行修改 state.username = value } }, actions: { updateUsernameFo(content,value){// 调用mutations中的方法对state中的数据进行修改 // 可以在此进行其他操作 content.commit('updateUsername',value) } }, getters: {// 相当于vue中的计算属性,当state中的数据未修改时,读取缓存 getUsername(state){ return state.username.length; } }, modules: {// 模块化vuex,使之成为独立的个体 } })### 1.async 异步操作
-
在异步调用时外层必须有一个函数
-
并且这个函数被 async 修饰
-
调用方法被 await 修饰
<script> methods: { async findAll(){ // 使用结构进行拆分 let {status,data} = axios.get('/student'); console.info(status); console.info(data); }, </script>
2.拦截器
- 对请求或响应进行拦截
<script>
// 请求拦截器
axios.interceptors.request.use(config => {
config.headers.Aothorization = '设置请求头'
// request.getHeader("Authorization"); 在后台进行接收
return config;
},error => {
return Promise.reject(error);
});
// 响应拦截器
axios.interceptors.response.use(response => {
return response;
},error => {
return Promise.reject(error);
});
</script>
3.导航守卫
- 维护导航间的跳转,取消(组件是否跳转)
// 前置导航守卫
router.beforeEach((to, from, next) => {
next();
})
// 后置导航守卫
router.afterEach((to, from) => {
})
4.Vuex
-
Vuex是一个专门为Vue.js应用程序开发的状态管理模式
-
Vuex间的数据管理
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: {// 保存的基本数据 username :'jack', password :'123' }, mutations: { updateUsername(state,value){// 通过函数对基本数据进行修改 state.username = value } }, actions: { updateUsernameFo(content,value){// 调用mutations中的方法对state中的数据进行修改 // 可以在此进行其他操作 content.commit('updateUsername',value) } }, getters: {// 相当于vue中的计算属性,当state中的数据未修改时,读取缓存 getUsername(state){ return state.username.length; } }, modules: {// 模块化vuex,使之成为独立的个体 } })