当前位置: 首页>前端>正文

vue 接口响应获取ReadableStream vue获取接口的数据渲染

vuex中从接口获取数据,并渲染到页面

vue中,有时候要使用vuex来处理项目中的一些接口问题,于是简单测试了一下,以下是我的方法,如有错误,请指出。

1.首先,新建一个文件夹,如图,在新建一个index.js文件,内容填写在里面,因为我的项目并不完整,所以使用的vuex属性并不多。

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_vue,第1张

2.在vue官网中引入vuex,这里我使用的是npm安装,npm安装需要在index.js写入以下的代码。

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_App_02,第2张

3.导入封装好的api接口函数,这里的接口封装我就不详细讲解,因为我需要引入三个接口,所以就在index.js引入了三个,需要注意的是,接口名一定要和你封装调用的接口名一致。

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_前端_03,第3张

这是getapi.js文件

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_前端_04,第4张

4.实例化vuex配置对象,并导出

export default new Vuex.Store({
})

5.state封装状态,在store文件夹下新建一个state.js,初始化数据

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_前端_05,第5张

6.vuex中为了代码看起来简洁清晰,常常使用常量替代Mutation事件类型。新建mutation-type.js,自定义常量名。

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_前端_06,第6张

7.mutations更改状态的逻辑,同步操作。在store文件夹下新建一个mutations.js

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_数据_07,第7张

8.actions – 提交mutation,异步操作,因为我接口中需要经纬度数据,所以我在这里直接将经纬度写死,测试一下。

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_vue_08,第8张

9.在index.js导入state,mutations,mutation-type文件

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_App_09,第9张

10.在index.js配置对象里引入state,mutations

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_vue_10,第10张

11.在App.vue里调用

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_数据_11,第11张

12.在需要渲染的页面导入辅助函数

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_App_12,第12张

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_前端_13,第13张

13.测试有没有拿到数据

vue 接口响应获取ReadableStream vue获取接口的数据渲染,vue 接口响应获取ReadableStream vue获取接口的数据渲染_vue_14,第14张

如果拿到数据,可以通过v-for循环遍历数组,精确拿到你想要的数据。



https://www.xamrdz.com/web/2pz1922103.html

相关文章: