vue通过ajax请求数据的流程简单介绍

创建一个.js文件，用来对ajax请求进行封装，便于使用
如下：
创建一个新的和axios有同样功能的实例（一般不对原有的axios进行修改）

const service = axios.create({
    baseURL:'/api',
    timeout:20000
});

创建一个新的.js文件用来放置接口请求函数
如下;就是一个接口请求函数（get请求）

export const reqCategoryList=()=>{
    return request({
        url:'/product/getBaseCategoryList',
        method:'get'
    })
}

在vuex中进行三部曲（state,actions,mutations）
state用来存放数据

const state={
        categoryList:[],
       }

actions相当于是桥梁，与组件中的用户对接 异步发请求 通过commit提交到mutations
await用来获取请求的数据(我目前的理解就是await获取的是promise成功的值)，放在result中
注意的是await的使用必须在async中

const actions={
    async  getCategoryList({commit}){
        const result =await  reqCategoryList()
        if(result.code===200){
            commit('REVEIVE_CATEGORYLIST',result.data)
        }
    },
    }

mutations用来对数据进行处理，然后存储到state中

const mutations={
    REVEIVE_CATEGORYLIST(state,categoryList){
        state.categoryList=categoryList
    }
    }

在需要使用数据的组件的mounted（）中this.$store.dispatch(‘getCategoryList’)触发actions执行，从而触发三连环的执行

 mounted(){
        this.$store.dispatch('getCategoryList')
    }

在computed中用过…mapState从vuex中拿数据到vue中

computed:{ 
        ...mapState({
            categoryList:state=>state.home.categoryList
        })
    }

这时候数据就到了当前组件的categoryList中，在控制台输出categoryList，通过其结构就可以使用数据了。
以上就是我的理解，作为初学者，有不对的地方请包涵！