由于异步原因导致在主线中不能直接使用接口返回的数据的解决方式。(vue+TS+Axios)

在我的第二次项目中，我仍然遇到了在第一次项目中遇到的问题——接口返回的数据不能直接在html或者vue中像自己使用let定义的变量一样使用。因此我也查询过一些方法：

使用promise我没有看懂；

当数据获取成功后将数据作为实参传递给需要使用的函数，这个方法只能适用于在方法中使用该参数；

我在第一次项目中使用的方法是将获取的数据保存到本地存储中，然后使用的时候再从本地读取出来，因为在第一次的时候使用到的比较少，因此这个方法的弊病没有体现出来。但是在第二次项目中使用较多，就出现了以下弊病：首先就是页面不能立即按照数据的改变而改变，需要刷新一次之后才能展示出来；然后就是限制较多，需要判断数据是否为空等，比较麻烦，而且容易遗忘。

因此本次在学姐的帮助下，我学习到了一种新的方法：使用pinia库保存。

首先需要定义接口：

import request from '@/utils/request'

export interface dataFindBig {
  keywords: string
  worksType: number
  worksShape: number
}
//根据作品名、大类型、小类型查询
export const findBig = (keywords: string, worksType: number, worksShape: Array<number>) =>
    request.get<any, dataFindBig>(`/works/keywords?keywords=${keywords}&worksType=${worksType}&worksShape=${worksShape}`)

第一行：的作用是引入二次封装后的axios，若没有二次封装，那地址就是http。

第三行：定义了参数的类型

第九行：中的参数也可以使用接口名dataFindBig，在这里我没使用。但是在第十行，尖括号中第二个参数是参数类型，更详细的用法可以自己再详细了解。注意了：我在这里用的是箭头函数，箭头之后没有使用大括号，表示第十行是return之后的内容，如果加了大括号就需要在request之前加上return。

然后就是创建pinia库：

//引入pinia
import { defineStore } from 'pinia'
//引入相关接口
import { findBig } from '@/api/fuShe-api'
let warehouseOne = defineStore('buzhidaoganshenme', {
    //仓库存储数据的地方
    state: () => {
        return {
        }
    },
    actions: {
        async findBig(keywords: string,worksType: number,worksShape: Array<number>){
            let result:any = await findBig(keywords,worksType,worksShape)
            if(result&&result.code===200){
                return result.data.worksList
            }
        },

    },
    getters:{},
})
//点击触发对应的上传事件
export default warehouseOne

第二行引入pinia的固定形式。

第四行引入第一步中创建的接口名。

其中warehouseOne与buzhidaoganshenme为自定义的变量名。第七行state的return内是要检测的返回值内容，因为我没有使用到，因此就不过多赘述。

之后在11行的actions内的写法就是固定形式，大家按照自己接口的名字来修改就可以。

注意：14行的if里面的内容，当返回数据的code码为200时表示请求成功，然后将需要的数据返回。我们这里使用200表示成功，具体code码是什么根据自己的代码确定。

最后就是在需要的地方引入：

//引入相应的东西
import { storeToRefs } from "pinia";
import warehouseOne from "@/store/modules/pinia-fuShe";
let useStore = warehouseOne();

let result = await useStore.findBig("",1,[Number(a)])

第二行固定格式，直接引入；第三行引入自己创建的pinia库中的变量；第四行创建该对象的实例对象。

第六行的result得到的就是pinia库第十五行的返回内容。

使用这种方法的优点：1、可以实时刷新渲染内容；2、可以检测值的改变(本次实例中未展示)。