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

网友投稿 322 2023-05-04


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

回顾新闻详细页

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

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

state:{

user_name:"",

newslist:[],

newsdetail:{}

},

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

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

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

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

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

{http://{this.$store.state.newsdetail.desc}}

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

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

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

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

import Vuex from 'vuex';

Vue.use(Vuex);

const vuex_OSVbuKBstore = 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){

// 进行请求,获取点赞后的agree字段属性值

Vue.http.post("http://localhost/agree.php",{newsid:newsid},{emulatejsON:true}).then(function (res) {

// 处理业务

// 调用上面setAgree方法更新点赞数

OSVbuKB context.commit("setAgree",res.body.agree);

},function(){})

}

},

getters:{

getNews(state){

return state.newslist.filter(function (news) {

return !news.isdeleted;

})

}

}

})

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

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

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(){})

}

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

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

methods:{

submitAgree(){

// 组件了调用actions里定义的agree方法

this.$store.dispatch("agree",this.$store.state.newsdetail.id)

}

}

news-detail.vue 组件全部代码:

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

{{this.$store.state.newsdetail.desc}}

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

{"status":"success","agree":100}


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:java实现Object和Map之间的转换3种方式
下一篇:Maven2环境安装与准备工作详解
相关文章

 发表评论

暂时没有评论,来抢沙发吧~