最近从B站上面跟着敲 vue 的项目，多次看到有关于前台拿到后端的接口地址文档，写前端接口，然后请求后台数据，放到 vuex 当中，再然后再在需要展示数据时渲染出来，于是做个输出小结，分享出来，供大家一起学习进步。

一、先看后台提供的相关接口文档（如下图）

-其中我感觉最重要的就是我用红框圈起来的 4.1请求地址

二、然后找到自己项目中对应写接口的文件下添加相应符合要求的接口

上图所示的文件下有很多个接口，红框圈起来的是本次的接口，此次项目用到的是 axios ，发请求有两种写法，一种是对象写法（ axios.post(‘url’））,另一种是函数写法（ axios({}）） 上图这次接口用到的是函数写法。其中也有对象写法，在红框上方的两个 mock 数据的请求，有关 mock的知识 后期我再单独写篇博客输出。

三、前端接口写好后，去相应的 vuex 模块仓库引入接口函数（一般项目的vuex仓库都放在名为 “store” 文件夹下），并在对应的配置对象下，写“三连环的套路” （如下图）

上图 关于仓库我是把 vuex 的仓库分成了若干个 小仓库 ，每个 小仓库 对应项目中的一个组件模块的数据保存，然后再把它们统一放到 大仓库 中（如下图所示）

可以看到 store 文件夹中有 home 和 search 两个子文件夹，与home 和 search 文件夹并列有一个 index.js 是 大仓库，两个 小仓库 分别在 home 和 search 两个子文件夹下的 index.js 相关大仓库合并小仓库代码入下图所示

呃··· 扯偏了，继续看如何在 vuex 仓库中请求后拿到后台数据，然后 “三连环” 式的放到 state 配置对象下，供全局组件使用从后台拿过来的数据 （看下图）

四、到此，就可以在全局相应的组件使用 this.$store.dispatch(‘getSearchList’) 这条语句来触发 仓库中的 actions 配置对象中的相应 接口函数 进行数据请求，然后接收了（这条语句请求的是 getSearchList 这个函数对应的接口）。（如下图）

一般是在组件挂载完毕的生命周期钩子函数写这条语句（根据个人业务需求）

五、我写在了我项目中的一个组件里，当组件被挂载完毕时，这条语句便会执行了，相应的一系列连锁反应就会发生了（三连环完毕后），通过 vue 的开发者调试工具可以看到最终拿到的数据 （看下图）

六、当然也可以在用到此组件的相关页面渲染完毕后，通过浏览器的 F12 调试工具下 的 NetWork 查看数据的请求情况（看下图）

七、在代码中 log 打印出来也方便查看数据和相应的调试

总结：刚开始写博客，没有什么书写经验、分享经验、会慢慢学习进步，大家多多包涵。一同进步！！！

呃呃呃··· 大总结：

1. 先根据后台给的接口文档，在 前端项目 API 接口文件下写前台接口 （一般在 src 的 api 文件夹下）
2. 然后从前台项目的 store 文件夹的相关仓库 写三连环
3. 在相应组件中的合适位置 利用 this.$store.dispatch(‘xxx’) 触发相关store对应组件仓库 中的 actions配置对象的请求函数，拿到数据。over over

还有就是接口不一定非要用在 vuex 的 store仓库中，如果此次请求的数据不是很多组件全局共享的状态 ，完全可以在某个需要用到数据的组件直接引入相关前台接口，请求回来数据 放到 data 中，也是一样可以的。 over ~