vue實(shí)現(xiàn)點(diǎn)擊關(guān)注后及時(shí)更新列表功能
更新時(shí)間：2018年06月26日 08:39:09 作者：蓓蕾心晴
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊關(guān)注后及時(shí)更新列表功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
如圖，我要實(shí)現(xiàn)點(diǎn)擊關(guān)注之后列表及時(shí)更新成最新的列表。
思路很簡(jiǎn)單，主要是兩點(diǎn)：
1、在點(diǎn)擊關(guān)注之后去執(zhí)行一個(gè)請(qǐng)求新的關(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: "請(qǐng)先登錄",
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)注出錯(cuò)，請(qǐng)重試！");
});
}
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實(shí)現(xiàn)點(diǎn)擊關(guān)注后及時(shí)更新列表功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue項(xiàng)目中將element-ui table表格寫成組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目中將element-ui table表格寫成組件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
element?表格多級(jí)表頭子列固定的實(shí)現(xiàn)
本文主要介紹了element?表格多級(jí)表頭子列固定的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
計(jì)算屬性用于處理復(fù)雜的業(yè)務(wù)邏輯,vue提供了檢測(cè)數(shù)據(jù)變化的一個(gè)屬性watch可以通過newVal獲取變化之后的值,這篇文章主要給大家介紹了關(guān)于Vue中計(jì)算屬性和屬性偵聽的相關(guān)資料,需要的朋友可以參考下2021-10-10
vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示
表格判斷在很多項(xiàng)目中都用得到,本文主要介紹了vue設(shè)置必填項(xiàng)和判斷必填項(xiàng)是否填入的彈窗提示,具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11
vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式)
這篇文章主要介紹了vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
這篇文章主要為大家分享了vue多級(jí)多選菜單組件開發(fā)案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
vue.js組件vue-waterfall-easy實(shí)現(xiàn)瀑布流效果
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)瀑布流之vue-waterfall-easy的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了vue3如何使用pinia替代vuex問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue 的組件作用域都是孤立的，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。必須使用特定的方法才能實(shí)現(xiàn)組件之間的數(shù)據(jù)傳遞。下面這篇文章主要給大家介紹了關(guān)于vue中各組件之間傳遞數(shù)據(jù)的方法示例，需要的朋友可以參考學(xué)習(xí)。2017-07-07
Vue路由與a標(biāo)簽鏈接錨點(diǎn)發(fā)生沖突問題及解決
這篇文章主要介紹了Vue路由與a標(biāo)簽鏈接錨點(diǎn)發(fā)生沖突問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03