VUE如何使用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能
這篇文章主要介紹VUE如何使用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的永嘉網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
回顧新聞詳細(xì)頁(yè)
很早我們的新聞詳情頁(yè)是在news-detail.vue 組件里，獲取服務(wù)器數(shù)據(jù)，然后把數(shù)據(jù)保持到組件的data 里，既然我們已經(jīng)用到了vuex，學(xué)習(xí)了它的state，我們就應(yīng)該想到把返回的數(shù)據(jù)交給state 來(lái)存儲(chǔ)。
1.首先在Vuex.Store 實(shí)例化的時(shí)候：
state:{
user_name:"",
newslist:[],
newsdetail:{}
},增加一個(gè)newsdetail 對(duì)象，newslist 數(shù)組是我們前面用來(lái)保存新聞列表數(shù)據(jù)的。
2.下面就要看在news-detail.vue 組件里，怎么請(qǐng)求數(shù)據(jù)，然后交給newsdatail ：
通過(guò)this.$store.state.newsdetail = res.body; 就把服務(wù)器返回的新聞詳細(xì)數(shù)據(jù)保存起來(lái)了。
3.那么模板上怎么展示？
{{this.$store.state.newsdetail.title}}{{this.$store.state.newsdetail.pubtime}}
點(diǎn)贊數(shù):{{this.$store.state.newsdetail.agree}} 點(diǎn)贊
{{this.$store.state.newsdetail.desc}}
這里我們要來(lái)實(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 方法，用來(lái)同步頁(yè)面上的點(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)說(shuō)明：這里發(fā)送http請(qǐng)求，和組件里不一樣，需要注意。
那么，組件里怎么調(diào)用這里的agree 方法呢？
點(diǎn)贊
methods:{
submitAgree(){
// 組件了調(diào)用actions里定義的agree方法
this.$store.dispatch("agree",this.$store.state.newsdetail.id)
}
}news-detail.vue 組件全部代碼：
{{this.$store.state.newsdetail.title}}{{this.$store.state.newsdetail.pubtime}}
點(diǎn)贊數(shù):{{this.$store.state.newsdetail.agree}} 點(diǎn)贊
{{this.$store.state.newsdetail.desc}}
重慶分公司
重慶分公司
