<template>
	<div>
		<Particles></Particles>
		<TypeNav />
		<!--列表-->
		<ListContainer />
		<!--今日推荐-->
		<TodayRecommend />
		<!-- 商品排行 -->
		<Rank />
		<!-- 猜你喜欢 -->
		<Like />
		<!--楼层-->
		<Floor v-for="item in getfloorslist" :getfloorslist="item" :key="item.id" />
		<!--商标-->
		<Brand />
	</div>
</template>

<script>
import Particles from '@/components/ParticlesJS'
import Brand from './Brand/Brand'
import Floor from './Floor/Floor'
import Like from './Like/Like'
import ListContainer from './ListContainer/ListContainer'
import Rank from './Rank/Rank'
import TodayRecommend from './TodayRecommend/TodayRecommend'
import { mapState } from 'vuex'
export default {
	name: 'HOME',
	components: {
		Brand,
		Floor,
		Like,
		ListContainer,
		Rank,
		TodayRecommend,
		Particles
	},
	mounted() {
		this.$store.dispatch('getfloorslist')
		// this.getpeoplemessage()
	},
	methods: {
		async getpeoplemessage() {
			try {
				// 使用接口根据token获取用户信息在首页  token已经永久存储,在请求拦截器
				// 会给该接口的请求头携带数据
				let result = await this.$store.dispatch('getpeoplemessage')
				console.log(result)
			} catch (error) {
				alert(error.message)
			}

			
		}
	},
	updated() {
		console.log(this.getfloorslist)
	},
	computed: {
		// 获取floors数据 因为要遍历两个floors
		// 之前商品分类之所以在自身上进行获取数据，是因为他是全局组件
		...mapState({
			getfloorslist: (state) => {
				return state.home.getfloorslist
			}
		})
	}
}
</script>

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