使用vuex模块化 来实现导航功能

<template>
	<!-- 商品分类导航 -->
	
	<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 v-for="(c1,index) in categoryList" :key="c1.categoryId" class="item">
	                    <h3>
	                        <!-- <a href="">{{c1.categoryName}}</a> -->
							<router-link :to="{name:'search',query:{categoryName:c1.categoryName,category1Id:c1.categoryId}}">{{c1.categoryName}}</router-link>
	                    </h3>
	                    <div  class="item-list clearfix">
	                        <div v-for="(c2,index) in c1.categoryChild" :key="c2.categoryId" class="subitem">
	                            <dl class="fore">
	                                <dt>
	                                    <!-- <a href="">{{c2.categoryName}}</a> -->
										<router-link :to="{name:'search',query:{categoryName:c2.categoryName,category2Id:c2.categoryId}}">{{c2.categoryName}}</router-link>
	                                </dt>
	                                <dd>
	                                    <em v-for="(c3,index) in c2.categoryChild" :key="c3.categoryId">
	                                        <!-- <a href="">{{c3.categoryName}}</a> -->
											<router-link :to="{name:'search',query:{categoryName:c3.categoryName,category3Id:c3.categoryId}}">{{c3.categoryName}}</router-link>
	                                    </em>
	                                </dd>
	                            </dl>
	                        </div>
	                    </div>
	                </div>
	                
				</div>
	        </div>
	    </div>
	</div>
	
</template>

<script>
	import {mapState} from 'vuex'
	export default{
		name:'NavType',
		data(){
			return{
				
			}
		},
		mounted() {
            //派发
			this.$store.dispatch('categoryList');
		},
		computed:{
			// mapState 辅助函数  直接使用categoryList
			...mapState({
				categoryList:(state)=>{
					//使用state里的home模块 里面的categoryList
					return state.home.categoryList;
				}
			})
		}
		
		
	}
</script>

<style scoped="scoped" lang="less">
	
	
</style>

 在store的home里执行

import { reqCategoryList } from "@/api"
//state 存数据的地方
const state = {
	//初始值
	categoryList:[]
};
//mutations 修改state的唯一手段
const mutations = { 
	CATEGORYLIST(state,categoryList){
		state.categoryList = categoryList
	}
};
//action 处理action 书写逻辑的地方
const actions ={
	//这里修改业务逻辑 不可修改state
	//通过api发请求
	async categoryList({commit}){
		let res = await reqCategoryList();
		if(res.code == 200){
			commit('CATEGORYLIST',res.data);
		}
	}
}
//getter 理解为计算属性
const getters = {
	
}

//暴露出去
export default{
	state,
	mutations,
	actions,
	getters
}