文章讲述了如何将TypeNav组件从src/pages/Home移动到src/components，更新其在main.js中的路径。接着在组件挂载后发起请求，使用action处理服务器响应，将数据提交到Vuexstore的mutations，并在组件中获取并显示数据。最后调整DOM结构以正确展示数据。
由于TypeNav是全局组件，因此将“src/pages/Home”中的“TypeNav”文件夹移动到“src/components”文件夹中
在main.js中修改TypeNav的路径
删除测试请求部分代码
当组件挂载完毕，可以向服务器发请求，然后获取数据，显示数据了。在“src/componetns/TypeNav/index.vue”中，添加如下代码：
其中，categoryList是一个action
找到“src/store/home/index.js”这个数据仓库中编辑action，代码如下。
其中，引入的接口名是在“src/api/index.js”中定义的：
可以看到打印的响应数据如下：
当请求成功后，继续将响应的数据（result.data）提交到mutations：
将数据仓库中的数据修改为服务器返回的数据：
此时可以看到仓库中已经有了服务器返回的数据：
接下来就需要在组件中拿到仓库中的数据进行显示。打开“src/components/TypeNav/index.vue”，添加如下代码：
此时可以看到页面上出现响应的数据：
接下来需要让数据显示在相应的位置上，删除如下区域代码：
改为如下代码：
扫一扫
811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
