vue学习记录 (async,拦截器,导航守卫,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,使之成为独立的个体
  
    }
  })### 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,使之成为独立的个体
  
    }
  })