2021-12-11 vue移动端卖座电影项目(十一) comingSoon用后台获取的数据写样式,以及用vuex的Action处理异步问题:切换FilmHeader中的两个标签时直接缓存数据

0.vuex工作流程图复习

1.思路

2.axios获取后台数据(仿nowPlaying页即可)

comingSoon.vue

<template>
  <div class="wrapper">
    <ul>
      <li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data.filmId)">
        <img :src="data.poster" alt="">
        <h3>{{data.name}}</h3>
        <h4>{{data.category}}</h4>
        <p>主演:{{data.actors | actorfilter}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios"
import Vue from "vue"
Vue.filter('actorfilter',function(){
  var newlist=data.map(item=>item.name);
  return newlist.join(' ');
});
export default {
  data(){
    return{
      datalist:[]
    }
  },
  methods:{
    //点击跳转到Detail详情页
    handleChangePage(id){
      console.log("获取id",id);
      this.$router.push({name:"renameDetail",params:{id:id}});
    }
  },
  mounted() {
    axios({
      url:"https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=2&k=2005623",
      headers:{
       ' X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297","bc":"310100"}',
       ' X-Host': 'mall.film-ticket.film.list'
      }
    }).then(res=>{
      console.log(res.data.data.films);
      this.datalist=res.data.data.films;
    })
  }
};
</script>
<style lang="scss" scoped>
  ul{
    li{
      padding:10px;
      overflow:hidden;
      img{
        float: left;
        width: 100px;
      }
    }
  }
</style>

结果:

3.用vuex的Action处理异步问题:切换FilmHeader中的"正在热映"和"即将上映"时直接缓存数据

3.1.触发使用缓存数据的逻辑

comingSoon.vue

 mounted() {
    if(store中的list.length==0){
      发送Ajax请求:axios({})
    }else{
      console.log("使用缓存数据");
    }
 }

写成正式代码:
store/index.js

    state: {
        //自定义共享状态
        showTabbar: true,
        comingList: []
    },

comingSoon.vue

 mounted() {
    if(this.$store.state.comingList.length==0){
        axios({
          url:"https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=2&k=2005623",
          headers:{
          ' X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297","bc":"310100"}',
          ' X-Host': 'mall.film-ticket.film.list'
          }
        }).then(res=>{
          console.log(res.data.data.films);
          this.datalist=res.data.data.films;
        });
    }else{
        console.log("使用缓存数据");
      }
  }

3.2.将axios请求写在action中,$this.store.dispatch的第一个参数就是action的名字

comingSoon.vue

 mounted() {
    if(this.$store.state.comingList.length==0){
    	//ajax
		this.$store.dispatch('getComingListAction');
    }else{
        console.log("使用缓存数据");
      }
  }

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from "axios"//引入axios
Vue.use(Vuex)
export default new Vuex.Store({
    state: {//自定义共享状态
    	comingList:[]
    },
	...
    // 异步处理
    actions: {
        getComingListAction() {
            axios({
                url: "https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=2&k=2005623",
                headers: {
                    ' X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297","bc":"310100"}',
                    ' X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => {
                console.log(res.data.data.films);
                this.datalist = res.data.data.films;
            });
        }
    }
})

效果:comingSoon.vue成为单纯的视图渲染组件,把其请求业务集中管理到state中处理

3.3. 把数据提交到mutation中

store/index.js

  state: {
        //自定义共享状态
        showTabbar: true,
        comingList: []
    },
    mutations: { //唯一修改状态的位置
        listentabbarShow(state, data) {
            state.showTabbar = data;
        },
        listentabbarHide(state, data) {
            state.showTabbar = data;
        },
        comingSoonMutation(state, data) { //只作为状态修改存在
            state.comingList = data;
        }
    },
    // 异步处理
    actions: {
        //自动传入当前组件对象store
        getComingListAction(store) {
            axios({
                url: "https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=2&k=2005623",
                headers: {
                    ' X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297","bc":"310100"}',
                    ' X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => {
                // this.datalist = res.data.data.films;
                // commit的第一个参数是mutation的名字,第二个参数是这个mutation的第二个参数
                store.commit("comingSoonMutation", res.data.data.films);
            });
        }
    }

效果:dev-tools插件中,comingList获取到数据

3.4. 把获取到的数据写入到comingSoon.vue页面中

comingSoon.vue

  <!-- <li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data.filmId)"> -->
        <li v-for="data in this.$store.state.comingList" :key="data.filmId" @click="handleChangePage(data.filmId)">
    ...
      </li>

4.完整代码

comingSoon.vue

<template>
  <div class="wrapper">
    <ul>
  <!-- <li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data.filmId)"> -->
        <li v-for="data in this.$store.state.comingList" :key="data.filmId" @click="handleChangePage(data.filmId)">
        <img :src="data.poster" alt="">
        <h3>{{data.name}}</h3>
        <h4>{{data.category}}</h4>
        <p>主演:{{data.actors | actorfilter}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios"
import Vue from "vue"
Vue.filter('actorfilter',function(){
  var newlist=data.map(item=>item.name);
  return newlist.join(' ');
});
export default {
  data(){
    return{
      datalist:[]
    }
  },
  methods:{
    //点击跳转到Detail详情页
    handleChangePage(id){
      console.log("获取id",id);
      this.$router.push({name:"renameDetail",params:{id:id}});
    }
  },
  mounted() {
    if(this.$store.state.comingList.length==0){
  this.$store.dispatch('getComingListAction');
    }else{
        console.log("使用缓存数据");
        /*理论上刷新页面后,第一次加载comingSoon页面,会打印这句话
        (猜测:要切换成3G网络才有此效果,然后也会跟nowPlaying形成加载速度的对比)*/
      }
  }
};
</script>
<style lang="scss" scoped>
  ul{
    li{
      padding:10px;
      overflow:hidden;
      img{
        float: left;
        width: 100px;
      }
    }
  }
</style>

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from "axios"
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        //自定义共享状态
        showTabbar: true,
        comingList: []
    },
    mutations: { //唯一修改状态的位置
        listentabbarShow(state, data) {
            state.showTabbar = data;
        },
        listentabbarHide(state, data) {
            state.showTabbar = data;
        },
        comingSoonMutation(state, data) { //只作为状态修改存在
            state.comingList = data;
        }
    },
    // 异步处理
    actions: {
        //自动传入当前组件对象store
        getComingListAction(store) {
            axios({
                url: "https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=2&k=2005623",
                headers: {
                    ' X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16662641254110824868151297","bc":"310100"}',
                    ' X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res => {
                // console.log(res.data.data.films);
                // this.datalist = res.data.data.films;
                // commit的第一个参数是mutation的名字,第二个参数是这个mutation的第二个参数
                store.commit("comingSoonMutation", res.data.data.films);
            });
        }
    }
})