鍍金池/ 問答/HTML/ 使用vuex實現(xiàn)上拉加載更多功能的問題

使用vuex實現(xiàn)上拉加載更多功能的問題

我想通過vuex來實現(xiàn)上拉加載更多時沒有更多數(shù)據(jù)的提示,但不知數(shù)據(jù)處理應(yīng)該怎么寫,目前獲取數(shù)據(jù)是用下面的代碼實現(xiàn)的

store/moduleA.js:

const state = {
  lists:[],
  nomore:false    //是否有數(shù)據(jù)
};

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;    //如果獲取不到更多數(shù)據(jù),應(yīng)該怎么處理才能通知到vue組件?
      
      if(res.length > 0) {
          commit('NoMore',false);
          commit('GetList',res);
      } else {
          commit('NoMore',true);
      }
    });
  }
};

在組件里通過dispatch獲取新數(shù)據(jù)
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('沒有更多數(shù)據(jù)了')
    } else {
       //do something
    }
});

如果用普通的寫法,可以通過服務(wù)器返回的信息來判斷,但vue是基于數(shù)據(jù)的,思路上有些不同,上面的代碼雖然能夠?qū)崿F(xiàn)功能,但總感覺不是很專業(yè),請問有沒有更好的方案實現(xiàn)沒有更多數(shù)據(jù)?

回答
編輯回答
替身

https://github.com/ElemeFE/vu...
可以使用這個組件

2017年1月6日 02:24
編輯回答
只愛你

getList 方法寫在 page.vue 里,vuex 只拿來存儲公共狀態(tài)。在 page.vue 里通過 commit 來改變 vuex 里的狀態(tài)

2017年2月11日 23:53