zoukankan      html  css  js  c++  java
  • Vue项目中使用Vuex + axios发送请求

      本文是受多篇类似博文的影响写成的,内容也大致相同。无意抄袭,只是为了总结出一份自己的经验。   

      一直以来,在使用Vue进行开发时,每当涉及到前后端交互都是在每个函数中单独的写代码,这样一来加大了工作量,二来代码零散复用度不高,修改时要多处修改,漏一处就出问题,三来满足于一种简单的方式不利于深入研究技术。现在做项目需要修改使用Vuex+axios发送请求的代码时,也是把原来的代码改为自己的“保留技术”,这样很不好,所以得研究一下如何在Vue项目中更好的与后台交互。

    1、修改原型链的方案

    // main.js
    import axios from 'axios';  // 引入axios
    
    Vue.prototype.$ajax = axios; // 修改原型链
    
    // componnentName.vue
    methods: {
      getData () {
        this.$ajax.get('/user-list').then( res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
      }
    }

    2、Vuex结合axios封装一个action的方案

    // main.js
    import store from './store/';  // 方案二:结合Vuex封装一个action
    
    new Vue({
      el: '#app',
      router,
      store, // 方案二:结合Vuex封装一个action
      components: { App },
      template: '<App/>'
    })
    
    // store/index.js
    import Vue from 'vue';
    import Vuex from 'vuex';
    import axios from "axios";
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
        state: {  // 初始化数据,只要有可能的用到的最好都初始化
         text: {name: 'xxx'}, data: {} }, mutations: { changeData (state, obj) { // store中的数据只能通过commit mutation来改变 state.data
    = obj } }, actions: { // 封装一个ajax方法 saveForm (context) { axios.get('./b2b/captcha/img-captcha'}, context.state.test).then(res => { // 调用接口 context.commit('changeData', res.data) // 通过接口获取的后台数据保存到store中,等待组件取用 }) } } }) export default store; // componentName.vue
    computed: {
      data () { // 获取store里的数据,放在computed中可以实时更新
        return this.$store.state.data;
      }
    }, methods: { getDataVuex () { this.$store.dispatch('saveForm'); // 触发actions里的saveForm函数,调动接口 }, }

    上述两种方案是相互独立的,也就是说,即使在main.js中引入了axios并修改了原型链,在store/index.js中也不能直接使用this.$ajax,而是要引入axios后再使用。

    3、回调函数中的this指向问题

    回调函数如果是箭头函数,那么箭头函数内部的this会自动获取所在上下文的this值,作为自己的this值。在Vue项目中,this会指向当前的组件实例

    data () {
        return {
            a: 123
        }  
    },
    methods: {
        getDataVuex () {
            this.$store.dispatch('saveForm').then(res => {   // 回调函数是箭头函数
                console.log(this.a);  // --> 123
            })
        },
    }

    如果回调函数是普通函数,那么普通函数中this指向的不是组件实例,所以得进行一些处理才能让this指向当前的组件实例

    data () {
        return {
            a: 123
        }  
    },
    methods: {
        getDataVuex () {
            this.$store.dispatch('saveForm').then(function(res) {   // 回调函数是普通函数
                console.log(this.a);  // --> Cannot read property 'msg' of undefined
            })
        },
    }
    // 解决方案如下:
    getDataVuex () {
      var _vm = this;   _vm.$store.dispatch('saveForm').then(function(res) { // 回调函数是普通函数     console.log(_vm.a); // --> 123   }) }
    // 或:
    getDataVuex () {
      this.$store.dispatch('saveForm').then(function(res) {   // 回调函数是普通函数
        console.log(this.a);  // --> 123
      }.bind(this))
    }
     
  • 相关阅读:
    CrackRTFwp 顺便讲讲如何在pe文件中看资源
    开启驱动生涯
    hgame week2 week3
    hgamefinal re peko-chain!
    docker化hbase并使用外部zookeeper
    docker化canal-adapter
    脚本
    ansible模块-user
    esxi克隆虚拟机
    confluence配置搭建
  • 原文地址:https://www.cnblogs.com/zhengxj1991/p/9713329.html
Copyright © 2011-2022 走看看