标签：axios res Vue mock import Vuex store

1. 修改原型链

//main.js

import axios from 'axios';

Vue.prototype.$ajax = axios; //修改原型链

// .vue文件

methods:{
    getData(){
        this.$ajax.get('https://easy-mock.com/mock/5d41481656e5d340d0338e4b/shop/commodity')
            .then(res => {
                console.log(res)
            }).catch(err => {
                console.log(err)
            })
    }
}

2.Vuex 结合 axios 封装一个 actions

//store.js

import Vue from 'vue';
import Vuex from 'Vuex';
import axios from 'axios';

export const store = new Vuex.Store({
    State: {
        list: []
    },
    mutations: {
        changeList(state,res){   // store中的数据只能通过commit mutation来改变
            state.list = res.data.data.list
        }
    },
    actions: {
        getInfo(context) {
            axios.get('https://easy-mock.com/mock/5d41481656e5d340d0338e4b/shop/commodity')
                .then(res => {
                    context.commit('changeList',res)
                }).catch(err => {
                    console.log(err)
                })
        }
    }
})

// .vue文件

import {mapState,mapActions} from 'vuex'

export default {
    name:"HelloWorld",
    methods:{
        ...mapActions([
            'getInfo'   // 触发actions里的 getInfo 函数，调动接口
        ])
    },
    computed:{
        ...mapState([
            'list'      // 获取store里的数据，放在computed中可以实时更新
        ])
    },
    mounted() {
        this.getInfo()
    }
    
}

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

标签：axios,res,Vue,mock,import,Vuex,store
来源： https://www.cnblogs.com/sakura666/p/11331062.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。