欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實現(xiàn)點擊關(guān)注后及時更新列表功能

 更新時間:2018年06月26日 08:39:09   作者:蓓蕾心晴  
這篇文章主要介紹了vue實現(xiàn)點擊關(guān)注后及時更新列表功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下

如圖,我要實現(xiàn)點擊關(guān)注之后列表及時更新成最新的列表。

思路很簡單,主要是兩點:

1、在點擊關(guān)注之后去執(zhí)行一個請求新的關(guān)注列表的action;

2、在vue組件中watch監(jiān)聽已關(guān)注列表和推薦關(guān)注列表

主要代碼如下:

組件:

關(guān)注的methods:

followMethod(item){
     if(this.token){
      this.$store.dispatch('follow',{followUserId:item.pubId,page:this.page,size:this.size});
      this.$set(item,"followStatus",true);
//      this.$store.dispatch('refreshFollowList',{page:0,size:this.size});
     }else{
      Toast({
       message: "請先登錄",
       duration: 800
      });
      setTimeout(function () {
       this.$router.push('/login');
      },800)
     }
   },

watch:

followList(curVal, oldVal){
    console.log(curVal)
   },
   userFollowList(curVal, oldVal){
    console.log(curVal)
   },

followList.js vuex的列表module文件:

action:

follow({dispatch,commit},payload){
  axios({
   method:"post",
   url:"web/follow/add",
   headers: {'w-auth-token': Cookies.get('token')},
   params:{
    page:payload.page,
    size:payload.size
   },
   data:{
    followUserId:payload.followUserId
   }
  }).then((res) => {
   Toast("關(guān)注成功");
   return dispatch('refreshFollowList')
  }).catch((error) => {
   Toast("關(guān)注出錯,請重試!");
  });
 }

refreshFollowList({state,commit}){
  if(token){
   axios.all([
    axios({
     method:"get",
     url:"web/pub/recommend",
     headers: {'w-auth-token': token},
    }),
    axios({
     method:"get",
     url:"web/pub/list_pub_and_top_news",
     headers: {'w-auth-token': Cookies.get('token')},
    })
   ]).then(axios.spread(function(res1,res2){
    commit("REFRESHFOLLOWLIST",res1);
    commit("REFRESHUSERFOLLOWLIST",res2);
   }));
  }else{
   axios({
    method:"get",
    url:"web/pub/recommend",
   }).then(function(res){
    commit("REFRESHFOLLOWLIST",res);
   });
  }
 },

mutation:

const mutations = {
 REFRESHFOLLOWLIST(state,res){
   state.followList=res.data.content;
   state.totalPages=res.data.totalPages;
 },
 REFRESHUSERFOLLOWLIST(state,res){
  state.userFollowList=res.data.content;
  state.userTotalPages=res.data.userTotalPages;
 },
};

總結(jié)

以上所述是小編給大家介紹的vue實現(xiàn)點擊關(guān)注后及時更新列表功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • Vue 組件組織結(jié)構(gòu)及組件注冊詳情

    Vue 組件組織結(jié)構(gòu)及組件注冊詳情

    這篇文章主要介紹的是Vue 組件組織結(jié)構(gòu)及組件注冊,為了能在模板中使用,這些組件必須先注冊以便 Vue 能夠識別。這里有兩種組件的注冊類型:全局注冊和局部注冊。至此,我們的組件都只是通過 Vue.component 全局注冊的,文章學(xué)詳細內(nèi)容,需要的朋友可以參考一下
    2021-10-10
  • Vuex 使用及簡單實例(計數(shù)器)

    Vuex 使用及簡單實例(計數(shù)器)

    這篇文章主要介紹了Vuex 使用及簡單實例(計數(shù)器),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue3.0公共組件自動導(dǎo)入的方法實例

    vue3.0公共組件自動導(dǎo)入的方法實例

    這篇文章主要給大家介紹了關(guān)于vue3.0公共組件自動導(dǎo)入的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • 基于Vant UI框架實現(xiàn)時間段選擇器

    基于Vant UI框架實現(xiàn)時間段選擇器

    這篇文章主要為大家詳細介紹了基于Vant UI框架實現(xiàn)時間段選擇器,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • vue實現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼

    vue實現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼

    本文主要介紹了vue實現(xiàn)微信公眾號h5跳轉(zhuǎn)小程序的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08
  • vue2 el-table行懸停時彈出提示信息el-popover的實現(xiàn)

    vue2 el-table行懸停時彈出提示信息el-popover的實現(xiàn)

    本文主要介紹了vue2 el-table行懸停時彈出提示信息el-popover的實現(xiàn),用到了cell-mouse-enter、cell-mouse-leave兩個事件,具有一定的參考價值,感興趣的可以了解一下
    2024-01-01
  • Vue中的組件詳談

    Vue中的組件詳談

    這篇文章主要介紹了Vue的組件,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-10-10
  • 詳解Nuxt.js Vue服務(wù)端渲染摸索

    詳解Nuxt.js Vue服務(wù)端渲染摸索

    本篇文章主要介紹了詳解Nuxt.js Vue服務(wù)端渲染摸索,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-02
  • vue2實現(xiàn)pdf電子簽章問題記錄

    vue2實現(xiàn)pdf電子簽章問題記錄

    仿照e簽寶,實現(xiàn)pdf電子簽章?=>?拿到pdf鏈接,移動章的位置,獲取章的坐標,怎么實現(xiàn)呢,下面小編給大家介紹vue2實現(xiàn)pdf電子簽章問題記錄,感興趣的朋友一起看看吧
    2023-12-12
  • vue3過渡動畫的詳解

    vue3過渡動畫的詳解

    這篇文章主要為大家詳細介紹了vue3過渡動畫,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-02-02

最新評論