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

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