对接口(简单举例子理解)

对接口的几个步骤：

1、在api的js文件中写接口。

import request from '../util/request.js'
let myHomeBase = {
	// 示例
	allRun: '/errand/all',
	checkAcceptOrder: "/order/mine/accept"
}
export function AllRun() {
	return request({
		url: myHomeBase.allRun,
		method: 'get'
	})
}
export function checkAcceptOrder() {
	return request({
		url: myHomeBase.checkAcceptOrder,
		method: 'get'
	})
}

2、在vue页面使用 store.dispatch()：用来派发目标指令

在跑腿vue页面srcipt中：
onMounted(()=>{
    store.dispatch("store代码仓库中 myhome.js里面 actions中处理数据的异步方法"，方法中的data数据)
)


onMounted(()=>{
    store.dispatch("checkAccept",data)
})

 3、在store文件夹中：store代码库里使用vuex

先引入api里面的接口

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

然后开始使用vuex

import {
	AllRun,
	checkAcceptOrder,
	机器
} from "../../api/myhome.js"

export default {
    //state:存储数据
       //仓库
	state: () => ({
		runList: {},
		acceptData: {},
        家具
	}),
    //mutations:修改state里面的数据
	mutations: {
		getAllRun(state, data) {
			state.runList = data
		},
		getCheckAccept(state, data) {
			state.acceptData = data
		}
		王呜呜(权限集合, 新家具) {
			// 仓库里的家具给换成新的
			仓库.家具 = 新家具data
		}
	},
    //处理业务：异步方法
	actions: {
		async allRun(state, data) {
			let result = await AllRun()
			if (result.code == 200) {
				console.log(12455153, result)
				state.commit("AllRun", .data)
			}
		}
		async checkAccept(state) {
			let result = await checkAcceptOrder()
			console.log("checkAcceptOrder", result);
			if (result.code == 200) {
				state.commit("getCheckAccept", result.data)
			}
		},

        //用简单例子来表达：
		陈嘻嘻(权限集合, 木材) {
			// ...
			定义 生成打包的东西(成功了吗, 话, 数据) = api传过来的机器(木材data)
			if (成功了) {
				做成了家具result
				把家具给mutations的王呜呜
				权限.提交("王呜呜", 家具)
			}
		}
	},
}

 4、最后如何获取并使用数据

	import {
		useStore
	} from "vuex";

	const store = useStore();

	// 获取数据
	const result = reactive(store.state.indexPage.家具)

store.state.indexPage.家具是什么：store.js中默认暴露的方法中的indexPage中的属性

 

---

api写接口

首先vue发出目标指令，例如使用机器将木材制作成家具

 

在store代码仓库中使用vuex：vue下发一个指令，actions处理业务，使用异步将数据封装到方法中，再把actions提交到mutations中并更改state的数据，最后传递到state进行数据存储。

在代码仓库中，例如 myhome.js | store / myhome中

state：存储数据

mutations：是修改state的数据 

 

 actions：处理业务