Vue项目实战(四) ：动态展示三级联动数据

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>