标签：kind res kindlist mapState state mapActions include data

<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
    }
  }
}

标签：kind,res,kindlist,mapState,state,mapActions,include,data
来源： https://www.cnblogs.com/hy96/p/12099719.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。