vueのステータスマネージャ

store.js
 

import axios from '@/utils/request'
export default {
  state: {
    bannerlist: [],
    prolist: []
  },
  getters: {},
  actions: {
    getBannerlist (context) {
      axios.get('/banner').then(res => {
        context.commit({
          type: 'changeBannerlist',
          data: res.data.data
        })
      })
    },
    getProlist ({ commit }) {
      axios.get('/pro').then(res => {
        commit({
          type: 'changeProlist',
          data: res.data.data
        })
      })
    },
    loadMoreProlist (context, params) {
      console.log(context)
      return new Promise((resolve, reject) => {  //     action                  promise
        axios.get('/pro?limitNum=10&pageCode=' + params.pageCode).then(res => {
          console.log(res.data.data)
          if (res.data.data.length === 0) {
            resolve(0)
          } else {
            context.commit({
              type: 'changeProlist',
              data: [...context.state.prolist, ...res.data.data]
            })
            resolve(1)
          }
        })
      })
    },
    pullrefresh (context) {
      return new Promise(resolve => {
        axios.get('/pro').then(res => {
          context.commit({
            type: 'changeProlist',
            data: res.data.data
          })
          resolve()
        })
      })
    }
  },
  mutations: {
    changeBannerlist (state, data) {
      state.bannerlist = data.data
    },
    changeProlist (state, data) {
      state.prolist = data.data
    }
  }
}

 
 
 

import axios from '@/utils/request'
export default {
  state: { //           
    bannerlist: [],
    prolist: []
  },
  getters: { // state     a
  },
  actions: { //            
    getBannerlist (context) { //        ,context     
      axios.get('/banner').then(res => {
        context.commit({ //                    mutation
          type: 'changeBannerlist',
          data: res.data.data
        })
      })
    },
    getProlist ({ commit }) { //     
      axios.get('/pro').then(res => {
        commit({
          type: 'changeProlist',
          data: res.data.data
        })
      })
    }
  },
  mutations: {
    changeBannerlist (state, data) {
      state.bannerlist = data.data
    },
    changeProlist (state, data) {
      state.prolist = data.data
    }
  }
}

index.vue
 

<template>
  <div class="box">
    <header class="header">
      <router-link to="/search">  router-link>
    header>
    <div class="content" id="content">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        
        <van-swipe :autoplay="4000" indicator-color="white">
          <van-swipe-item v-for="item of bannerlist" :key="item.bannerid">
            <img :src="item.img" alt="">
          van-swipe-item>
        van-swipe>
        
        <van-list
          v-if="flag"
          v-model="loading"
          :finished="finished"
          finished-text="     "
          @load="onLoad"
        >
          <Prolist :prolist="prolist"/>
        van-list>
        <div v-else>
                       
          <router-link to="/login">  router-link>
        div>
      van-pull-refresh>
      <span @click="backtop" v-show="topflag" class="backtop iconfont icon-fanhuidingbu">span>
    div>
  div>
template>

<script>
import axios from '@/utils/request'
import { mapState } from 'vuex' //         
import Vue from 'vue'
import { Swipe, SwipeItem, List, PullRefresh } from 'vant'
//          ---- es6     
import Prolist from '@/components/Prolist.vue'
Vue.use(Swipe).use(SwipeItem)
Vue.use(List)
Vue.use(PullRefresh)
export default {
  //     
  components: {
    // Prolist: Prolist
    Prolist
  },
  data () {
    return {
      bannerlist: [],
      prolist: [],
      flag: false,
      loading: false, //            ，    ，        ，      false
      finished: false, //  true            
      pageCode: 1,
      isLoading: false, //      ，    ，      ，       false
      topflag: false //            
    }
  },
  created () {
    axios.get('/banner').then(res => {
      console.log(res.data)
      this.bannerlist = res.data.data
    })
    axios.get('/pro').then(res => {
      console.log(res.data)
      if (res.data.code === '10119') {
        this.flag = false
      } else {
        this.flag = true
        this.prolist = res.data.data
      }
    })
  },
  watch: {
    pageCode (newval, oldval) {
      if (newval > 2) {
        this.topflag = true
      } else {
        this.topflag = false
      }
    }
  },
  methods: {
    onLoad () { //           ，          
      this.loading = true //       
      axios.get('/pro?limitNum=10&pageCode=' + this.pageCode).then(res => {
        console.log(res.data)
        this.loading = false //       
        this.pageCode++ //         1
        if (res.data.code === '10119') { //    
          this.flag = false
        } else { //       
          this.flag = true
          //        ，      ，       ，     ，    
          if (res.data.data.length === 0) {
            this.finished = true //           
          } else {
            //      -----      
            // arr.concat(arr1)
            // [...arr, ...arr1]  es6      
            this.prolist = [...this.prolist, ...res.data.data]
          }
        }
      })
    },
    onRefresh () { //        
      this.isLoading = true //          （  ）   
      axios.get('/pro').then(res => {
        console.log(res.data)
        this.isLoading = false //             
        if (res.data.code === '10119') {
          this.flag = false
        } else {
          this.flag = true
          this.finished = false //            
          this.pageCode = 1 //             ，        
          this.prolist = res.data.data //             
        }
      })
    },
    backtop () {
      document.getElementById('content').scrollTop = 0
      this.topflag = false
    }
  }
}
script>

<style lang="scss">
.van-swipe {
  // height: 180px;
  img {
    width: 100%;
  }
}
.backtop {
  position: fixed;
  bottom: 60px;
  right: 10px;
  font-size: 30px;
}
style>