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>