项目笔记7（尚品汇）

动态展示三级联动数据

文件位置调整一下，之前文件位置不太合理

之前的首页里的三级联动里面的数据都是写死的，并不是请求后台的数据。为了使三级联动内的数据为后台请求过来的数据，就需要发送数据请求。实现这个功能的步骤如下。
首先由于三级联动这个组件是个全局组件，因此应该将三级联动组件由src/pages/Home拿出来放置在components文件夹内，同时修改main.js中的路径引入。文件结构与main.js的路径引入修改如下图所示。

发送请求以及页面渲染

做完上述调整后，在三级联动组件中设置挂载完毕生命周期钩子，当三级联动组件挂载到页面上，向Vuex发送请求。获取数据，同时将获取的数据存储到home仓库中。
具体步骤为，首先在三级联动组件挂载完成时，发送数据请求，home仓库拿到请求，对state进行操作，随后在三级联动组件中引入mapState，在计算属性中通过mapState设置categoryList用来接收数据。具体代码与数据获取结果如下图所示。拿到数据后利用v-for将数据渲染到页面中。