mapState, mapActions
<template> <div class="box"> <header class="header">分类头部</header> <div class="content"> <div class="kind"> <div class="left"> <ul> <li :class="kindindex === index ? 'active' : ''" v-for="(item, index) of kindlist" @click="getBrand(item, index)" :key="index">{{ item }}</li> </ul> </div> <div class="right"> <div class="top"> <ul> <li :class="brandindex === index ? 'active' : ''" v-for="(item, index) of brandlist" :key = "index" @click="getlist(item, index)"> <!-- <img :src="item.barndimg" alt=""> --> {{ item.brand }} </li> </ul> </div> <Prolist :prolist = "prolist"/> </div> </div> </div> </div> </template> <script> import { mapState, mapActions } from 'vuex' import Prolist from '@/components/Prolist' export default { components: { Prolist }, computed: { ...mapState({ kindlist: ({ kind: { kindlist } }) => kindlist,//kind=state.kind;kindlist=state.kind.kindlist brandlist: (state) => state.kind.brandlist, prolist: ({ kind }) => kind.prolist //kind=state.kind }) }, data () { return { kindindex: 0, brandindex: 0 } }, created () { // this.$store.dispatch('getKindlist').then(data => { // if (data === 0) { // this.$router.push('/login') // } else { // this.getBrand(this.kindlist[0], 0) // } // }) this.getKindlist().then(data => { if (data === 0) { this.$router.push('/login') } else { this.getBrand(this.kindlist[0], 0) } }) }, methods: { ...mapActions({ getKindlist: 'kind/getKindlist' // 自动生成一个函数 this.$store.dispatch('getKindlist') key值为组件自定义的函数,value为状态管理器action的名字,在需要的地方触发 自定义的函数即可 }), getBrand (item, index) { this.kindindex = index this.brandindex = 0 this.$store.dispatch('kind/getBrandlist', { item }).then(data => { if (data === 0) { this.$router.push('/login') } else { this.getlist(this.brandlist[0], 0) } }) }, getlist (item, index) { console.log('item', item) this.brandindex = index this.$store.dispatch('kind/getProlist', { brand: item.brand }).then(data => { if (data === 0) { this.$router.push('/login') } }) } } } </script> <style lang="scss"> @import '@/lib/reset.scss'; .content { .kind { @include rect(100%, 100%); @include flexbox(); .left { @include rect(1rem, 100%); @include border(0 1px 0 0, #efefef, solid); // @include background-color(#00f); ul { @include rect(100%, 100%); li{ @include rect(100%, 0.36rem); @include border(0 0 1px, #efefef, solid); @include line-height(0.36rem); @include text-align(); &.active { @include color(#f66); } } } } .right { @include flex(); @include rect(auto, 100%); // @include background-color(#0f0); @include overflow(); .top { @include rect(100%, auto); ul { li { @include rect(50%, 0.3rem); @include overflow(hidden); @include line-height(0.3rem); @include text-align(); @include display(inline-block); img { @include rect(100%, auto); } &.active { @include border(1px, #f66, solid); } } } } } } } </style>
import axios from '@/utils/request'
export default {
namespaced: true,
state: {
kindlist: [],
brandlist: [],
prolist: []
},
actions: {
getKindlist (context) {
let url = '/pro/type?type=type'
return new Promise(resolve => {
axios.get(url).then(res => {
console.log('kind', res.data)
if (res.data.code === '10119') {
// this.$router.push('/login')
resolve(0)
} else {
// this.kindlist = res.data.data
// this.getBrand(this.kindlist[0], 0)
context.commit({
type: 'changeKindlist',
data: res.data.data
})
resolve(1)
}
})
})
},
getBrandlist (context, data) {
let url = '/pro/category?type=' + data.item
return new Promise(resolve => {
axios.get(url).then((res) => {
console.log(res.data)
if (res.data.code === '10119') {
resolve(0)
} else {
// this.brandlist = res.data.data
// this.getlist(this.brandlist[0], 0)
context.commit({
type: 'changeBrandlist',
data: res.data.data
})
resolve(1)
}
})
})
},
getProlist (context, data) {
let url = '/pro/brandcategory?brand=' + data.brand
return new Promise(resolve => {
axios.get(url).then((res) => {
console.log(res.data)
if (res.data.code === '10119') {
resolve(0)
} else {
context.commit({
type: 'changeProlist',
data: res.data.data
})
resolve(1)
}
})
})
}
},
mutations: {
changeKindlist (state, data) {
state.kindlist = data.data
},
changeBrandlist (state, data) {
state.brandlist = data.data
},
changeProlist (state, data) {
state.prolist = data.data
}
}
}
长风破浪会有时,直挂云帆济沧海