对接口完整版

一、首先到apifox里面看：请求方法、请求路径、是否有参，有参数的话需要看参数类型和参数名称

二、在api里面写接口：

//首先引入请求
import request from '../util/request.js'
let postBase={
    getPostList: "/post/getPostListByUserID"(接口路径)
}
//无参的情况
export function getPostList(){
    return request({
        url:postBase.getPostList,    （请求路径）
        method:'get'    (请求方法)
    })
}

//有参数的情况:分为query参数、body参数、parame参数
//query参数：
export function getPostList(id){
    return request({
        // es6模板字符串
		url: postBase.getPostList + `?user_id=${id}`,    (user_id是apifox的参数名称)
		// 普通的拼接
		// url: postBase.getPostList + "?user_id="+id,
        method:'get'
    })
}
//body参数:
export function getPostList(data){
    return request({
		url: postBase.getPostList
        method:'get',
        data: data
    })
}
//parame参数:
export function getPostList(id){
    return request({
        // es6模板字符串
		url: postBase.getPostList + `${id}`,    (user_id是apifox的参数名称)
        method:'get'
    })
}

三、vuex的store代码仓库：包括state、mutations、actions

actions：

import {AllRun} from "../../api/myhome.js"

//需要返回数据提交到mutation时
//此时的data是我要传给后端的参数
async allRun(state, data) {
            //result：接收从后端传过来的数据，AllRun是api的请求方法
			let result = await AllRun(data)    
			if (result.code == 200) {
				console.log(12455153, result)
                    //将代码提交至mutations中
				state.commit("getAllRun", data)
			}
},

//不需要返回数据时，需要向后端传参时（需要写data）：
async allRun(state, data) {
			let result = await allRun(data)
			console.log(result);
			if (result.code == 200) {
				console.log('发布成功');
			}
}

//不需要返回数据时，不需要向后端传参时：
async allRun(state) {
			let result = await allRun()
			console.log(result);
			if (result.code == 200) {
				console.log('发布成功');
			}
}

mutations：修改数据的地方，当需要返回数据时，才使用mutations

mutations: {
        //这里的data是actions传给mutations的
		getCategoryType(state, data) {
            //给state的categorytype 和allPostList赋值为actions中的data
			state.categorytype = data
		},
		allPostList(state, data) {
			state.postList = data
		}
	},

state：存储新数据的地方

	// 初识值需要根据接口返回来的数据来写 ，返回的数据存储在此处
	state: () => ({
		categorytype: [],
		postList: []
	}),

四、页面调用

在哪里调用就在哪里写
//首先引入vuex	
import {useStore} from "vuex";
    //实例化store
	const store = useStore();
    //接收后端传过来的数据，用变量result来接收
	const result = computed(() => {
		return store.state.postPage.getPostList
	})
    const props = defineProps(["id", "content", "nickname", "head_image", "like_num", "images"])

//这句话在哪里调用就写在哪里，调用api里面的getPostList方法，并传递props.id参数(这个参数是vue传递的参数)
store.dispatch("getPostList", props.id)
//当没有参数时，直接调用即可
store.dispatch("getPostList")

调接口参数传递的步骤：vue页面参数调用->vuex的actions调用方法（->vuex的mutations->vuex的state）->api调用后端数据