在我的第二次项目中,我仍然遇到了在第一次项目中遇到的问题——接口返回的数据不能直接在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、可以检测值的改变(本次实例中未展示)。