1. TypeNav组件属于全局组件,所以需要放置到components文件夹下
2. TypeNav组件的数据属于home仓库下的,所以去store文件夹下的home文件夹下的index.js里请求
//src >>> store >>> home >>> index.js
//引入reqCategoryList
import { reqCategoryList } from "@/api";
//home模块的数据仓库
//state: 仓库存储数据的地方
const state = {
//第三步:由第二步知道categoryList应该有初始值,所以在state下我们需要给定初始值
//注意:state中数据默认的初始值不能随便写,应该根据接口的返回值类型去初始化,如果服务器返回的是对象,那么初始值就是对象,如果服务器返回的是数组,那么初始值就是数组
//第四步:如果在浏览器下的vue开发者工具中vuex下可以找到categoryList对应的数据,就可以去对应的组件(TypeNav)下去拿到仓库中的数据去页面展示数据了
categoryList: [],
};
//mutations: 修改state的唯一途径
const mutations = {
//第二步:由第一步解构出mutation之后可以发现没有CATEGORYLIST,所以在mutations下需要给到相应的CATEGORYLIST
CATEGORYLIST(state, categoryList) {
state.categoryList = categoryList
}
};
//actions: 处理action,可以书写自己的业务逻辑,也可以处理异步
const actions = {
//第一步: 通过api里面的接口函数的调用,向服务器发送请求,获取服务器的数据
async categoryList({commit}) {
let result = await reqCategoryList()
if(result.code == 200) {
//解构出commit mutation
commit("CATEGORYLIST",result.data)
}
}
};
//getters: 可以理解为计算属性,用于简化仓库数据,让组件获取仓库数据更加的方便
const getters = {};
//对外暴露
export default {
state,
mutations,
actions,
getters,
}
3.数据已经获取到了,需要去TypeNav组件中展示数据
//components >>> TypeNav >>> index.vue
<template lang="">
<div class="type-nav">
<div class="container">
<h2 class="all">全部商品分类</h2>
<nav class="nav">
<a href="###">服装城</a>
<a href="###">美妆馆</a>
<a href="###">尚品汇超市</a>
<a href="###">全球购</a>
<a href="###">闪购</a>
<a href="###">团购</a>
<a href="###">有趣</a>
<a href="###">秒杀</a>
</nav>
<div class="sort">
<div class="all-sort-list2">
<div class="item" v-for="(c1, index) in categoryList" :key="c1.categoryId">
<h3><a>{{ c1.categoryName }}</a></h3>
<div class="item-list clearfix">
<div class="subitem" v-for="(c2, index) in c1.categoryChild" :key="c2.categoryId">
<dl class="fore">
<dt><a>{{ c2.categoryName }}</a></dt>
<dd>
<em v-for="(c3, index) in c2.categoryChild" :key="c3.categoryId">
<a>{{ c3.categoryName }}</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
//引入仓库中的数据
import {mapState} from 'vuex';
export default {
name: 'TypeNav',
//组件挂载完毕:可以向服务器发请求,获取服务器数据,展示数据
mounted() {
//通知Vuex发请求,获取数据,存储于仓库之中
this.$store.dispatch('categoryList')
},
computed: {
...mapState({
//categoryList 对应的右侧的值需要的是一个函数,当需要这个计算属性的时候,这个函数会立即执行一次
//会注入一个参数state,这个state即为大仓库中的数据(store文件夹下的index.js,这个大仓库包含了home和search)
//此时可以使用简写形式(当箭头函数中的参数只有一个时,可以省略括号):
//categoryList:state=>state.home.categoryList;
categoryList:(state)=>{
return state.home.categoryList
}
})
}
}
</script>
<style scoped lang="less">
....
</style>