zoukankan      html  css  js  c++  java
  • vue项目全局使用axios

    共有三种方法:

    1.结合 vue-axios使用 

    首先在主入口文件main.js中引用

    import axios from 'axios'
    import VueAxios from 'vue-axios'
    
    Vue.use(VueAxios,axios);

    之后就可以在组件文件中的methods里去使用了

    this.axios.get('/api/usrmng')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

    2. axios 改写为 Vue 的原型属性 

    首先在主入口文件main.js中引用,之后挂在vue的原型链上

    import axios from 'axios'
    Vue.prototype.$http = axios

    在组件中使用

    this.$http.get('/api/usrmng')
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) {
      console.log(error);
    });

    3.结合 Vuex的action

    在vuex的仓库文件store.js中引用,使用action添加方法

    import Vue from 'Vue'
    import Vuex from 'vuex'
    
    import axios from 'axios'
    
    Vue.use(Vuex)
    const store = new Vuex.Store({
      // 定义状态
      state: {
        user: {
          name: 'root'
        }
      },
      actions: {
        // 封装一个 ajax 方法
        login (context) {
          axios({
            method: 'post',
            url: '/user',
            data: context.state.user
          })
        }
      }
    })
    
    export default store

    在组件中发送请求的时候,需要使用 this.$store.dispatch

    methods: {
      submitForm () {
        this.$store.dispatch('login')
      }
    }

    前端交流群,群文件提供大量文档、书籍和资料。期待你的加入!群号:127768464

  • 相关阅读:
    Nginx解决跨域
    子网掩码的作用
    并发与并行
    Java8 parallelStream与迭代器Iterator性能
    Spring Data MongDB空间索引(判断一个点Point是否在一个区域Polygon内)
    BeanFactory的实现原理
    序列化以及反序列化
    MongoDB用户名和密码
    Cannot assign to 'self' outside of a method in the init family
    OC方法和文件编译
  • 原文地址:https://www.cnblogs.com/sysg/p/10553647.html
Copyright © 2011-2022 走看看