账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    使用vuex实现上拉加载更多功能的问题
    15
    0

    我想通过vuex来实现上拉加载更多时没有更多数据的提示,但不知数据处理应该怎么写,目前获取数据是用下面的代码实现的

    store/moduleA.js:

    const state = {
      lists:[],
      nomore:false    //是否有数据
    };
    
    const mutations = {
      GetList(state,res) {    
        state.lists = state.lists.concat(res);
      }
      NoMore(state,res) {
        state.nomore = res;
      }
    };
    
    const actions = {
      async getList({commit},page) {
        await axios.get("url?p="+page).then(function (response) {
          let res = response.data;    //如果获取不到更多数据,应该怎么处理才能通知到vue组件?
          
          if(res.length > 0) {
              commit('NoMore',false);
              commit('GetList',res);
          } else {
              commit('NoMore',true);
          }
        });
      }
    };

    在组件里通过dispatch获取新数据
    page.vue:

    data() {
        return {
            nomore:false
        }
    },
    watch:{
       isNoMore(val) {
           this.nomore = val;
       }
    },
    computed:{
        ...mapState({
            isNoMore:state => state.nomore
        })
    },
    this.$store.dispatch('getList',page).then(function () {
        if(this.nomore) {
            console.log('没有更多数据了')
        } else {
           //do something
        }
    });

    如果用普通的写法,可以通过服务器返回的信息来判断,但vue是基于数据的,思路上有些不同,上面的代码虽然能够实现功能,但总感觉不是很专业,请问有没有更好的方案实现没有更多数据?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部