您好,登錄后才能下訂單哦!
這篇文章主要介紹VUE如何使用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
回顧新聞詳細(xì)頁
很早我們的新聞詳情頁是在news-detail.vue 組件里,獲取服務(wù)器數(shù)據(jù),然后把數(shù)據(jù)保持到組件的data 里,既然我們已經(jīng)用到了vuex,學(xué)習(xí)了它的state,我們就應(yīng)該想到把返回的數(shù)據(jù)交給state 來存儲(chǔ)。
1.首先在Vuex.Store 實(shí)例化的時(shí)候:
state:{ user_name:"", newslist:[], newsdetail:{} },
增加一個(gè)newsdetail 對(duì)象,newslist 數(shù)組是我們前面用來保存新聞列表數(shù)據(jù)的。
2.下面就要看在news-detail.vue 組件里,怎么請(qǐng)求數(shù)據(jù),然后交給newsdatail :
<script> export default{ // 創(chuàng)建的時(shí)候[生命周期里] created(){ this.$http.get("http://localhost/newsdetail.php?id="+this.$route.params.newsid).then(function(res){ this.$store.state.newsdetail = res.body; },function(res){ // 處理請(qǐng)求失敗 }); }, } </script>
通過this.$store.state.newsdetail = res.body;
就把服務(wù)器返回的新聞詳細(xì)數(shù)據(jù)保存起來了。
3.那么模板上怎么展示?
<div class="page-header"> <h3>{{this.$store.state.newsdetail.title}}<small>{{this.$store.state.newsdetail.pubtime}}</small></h3> <p>點(diǎn)贊數(shù):{{this.$store.state.newsdetail.agree}} <button class="btn btn-success">點(diǎn)贊</button></p> <p>{{this.$store.state.newsdetail.desc}}</p> </div>
這里我們要來實(shí)現(xiàn)一個(gè)點(diǎn)贊功能
點(diǎn)擊“點(diǎn)贊”按鈕,就更改點(diǎn)擊數(shù)。
其實(shí)就是更改newsdetail 里的agree 屬性。
本文參考文檔:https://vuefe.cn/vuex/actions.html
import Vuex from 'vuex'; Vue.use(Vuex); const vuex_store = new Vuex.Store({ state:{ user_name:"", newslist:[], newsdetail:{} }, mutations:{ showUserName(state){ alert(state.user_name); }, setAgree(state,agreeNum){ state.newsdetail.agree = agreeNum; } }, actions:{ agree(context,newsid){ // 進(jìn)行請(qǐng)求,獲取點(diǎn)贊后的agree字段屬性值 Vue.http.post("http://localhost/agree.php",{newsid:newsid},{emulateJSON:true}).then(function (res) { // 處理業(yè)務(wù) // 調(diào)用上面setAgree方法更新點(diǎn)贊數(shù) context.commit("setAgree",res.body.agree); },function(){}) } }, getters:{ getNews(state){ return state.newslist.filter(function (news) { return !news.isdeleted; }) } } })
在actions
里定義了一個(gè)方法agree
發(fā)送網(wǎng)絡(luò)請(qǐng)求,獲取最新的點(diǎn)贊數(shù)。
同時(shí)mutations
里定義了一個(gè)setAgree
方法,用來同步頁面上的點(diǎn)贊數(shù)。
agree(context,newsid){ // 進(jìn)行請(qǐng)求,獲取點(diǎn)贊后的agree字段屬性值 Vue.http.post("http://localhost/agree.php",{newsid:newsid},{emulateJSON:true}).then(function (res) { // 處理業(yè)務(wù) // 調(diào)用上面setAgree方法更新點(diǎn)贊數(shù) context.commit("setAgree",res.body.agree); },function(){}) }
重點(diǎn)說明:這里發(fā)送http請(qǐng)求,和組件里不一樣,需要注意。
那么,組件里怎么調(diào)用這里的agree 方法呢?
<button class="btn btn-success" @click="submitAgree">點(diǎn)贊</button>
methods:{ submitAgree(){ // 組件了調(diào)用actions里定義的agree方法 this.$store.dispatch("agree",this.$store.state.newsdetail.id) } }
news-detail.vue 組件全部代碼:
<template> <div class="news-detail"> <div class="row"> <div class="page-header"> <h3>{{this.$store.state.newsdetail.title}}<small>{{this.$store.state.newsdetail.pubtime}}</small></h3> <p>點(diǎn)贊數(shù):{{this.$store.state.newsdetail.agree}} <button class="btn btn-success" @click="submitAgree">點(diǎn)贊</button></p> <p>{{this.$store.state.newsdetail.desc}}</p> </div> </div> </div> </template> <script> export default{ // 創(chuàng)建的時(shí)候[生命周期里] created(){ this.$http.get("http://localhost/newsdetail.php?id="+this.$route.params.newsid).then(function(res){ this.$store.state.newsdetail = res.body; },function(res){ // 處理請(qǐng)求失敗 }); }, methods:{ submitAgree(){ // 組件了調(diào)用actions里定義的agree方法 this.$store.dispatch("agree",this.$store.state.newsdetail.id) } } } </script>
后端程序增加點(diǎn)贊數(shù),這里就不贅述了。只需返回一個(gè)json對(duì)象:
{"status":"success","agree":100}
以上是“VUE如何使用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。