VUE利用vuex模拟实现新闻点赞功能实例

前端之家收集整理的这篇文章主要介绍了VUE利用vuex模拟实现新闻点赞功能实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

回顾新闻详细页

很早我们的新闻详情页是在news-detail.vue 组件里,获取服务器数据,然后把数据保持到组件的data 里,既然我们已经用到了vuex,学习了它的state,我们就应该想到把返回的数据交给state 来存储。

1.首先在Vuex.Store 实例化的时候:

增加一个newsdetail 对象,newslist 数组是我们前面用来保存新闻列表数据的。

2.下面就要看在news-detail.vue 组件里,怎么请求数据,然后交给newsdatail :

export default{ // 创建的时候[生命周期里] created(){ this.$http.get("http://localhost/newsdetail.PHP?id="+this.$route.params.newsid).then(function(res){ this.$store.state.newsdetail = res.body; },function(res){ // 处理请求失败 }); },}

通过this.$store.state.newsdetail = res.body; 就把服务器返回的新闻详细数据保存起来了。

3.那么模板上怎么展示?

{{this.$store.state.newsdetail.title}}{{this.$store.state.newsdetail.pubtime}}

点赞数:{{this.$store.state.newsdetail.agree}}

这里写图片描述

这里我们要来实现一个点赞功能

点击“点赞”按钮,就更改点击数。

其实就是更改newsdetail 里的agree 属性

本文参考文档:https://vuefe.cn/vuex/actions.html

const vuex_store = new Vuex.Store({
state:{
user_name:"",mutations:{
showUserName(state){
alert(state.user_name);
},setAgree(state,agreeNum){
state.newsdetail.agree = agreeNum;
}
},actions:{
agree(context,newsid){
// 进行请求,获取点赞后的agree字段属性
Vue.http.post("http://localhost/agree.PHP",{newsid:newsid},{emulateJSON:true}).then(function (res) {
// 处理业务
// 调用上面setAgree方法更新点赞数
context.commit("setAgree",res.body.agree);
},function(){})
}
},getters:{
getNews(state){
return state.newslist.filter(function (news) {
return !news.isdeleted;
})
}
}
})

actions 里定义了一个方法agree 发送网络请求,获取最新的点赞数。

同时mutations 里定义了一个setAgree 方法,用来同步页面上的点赞数。

重点说明:这里发送http请求,和组件里不一样,需要注意。

那么,组件里怎么调用这里的agree 方法呢?

调用actions里定义的agree方法 this.$store.dispatch("agree",this.$store.state.newsdetail.id) } }

news-detail.vue 组件全部代码

{{this.$store.state.newsdetail.title}}{{this.$store.state.newsdetail.pubtime}}

点赞数:{{this.$store.state.newsdetail.agree}}

这里写图片描述

后端程序增加点赞数,这里就不赘述了。只需返回一个json对象:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章