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){
// 处理请求失败
});
},}
通过 3.那么模板上怎么展示？ {{this.$store.state.newsdetail.title}}{{this.$store.state.newsdetail.pubtime}}
点赞数:{{this.$store.state.newsdetail.agree}} {{this.$store.state.newsdetail.desc}}
这里我们要来实现一个点赞功能 点击“点赞”按钮，就更改点击数。 其实就是更改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; }) } } }) 在 同时 重点说明：这里发送http请求，和组件里不一样，需要注意。 那么，组件里怎么调用这里的agree 方法呢？ news-detail.vue 组件全部代码： {{this.$store.state.newsdetail.title}}{{this.$store.state.newsdetail.pubtime}}
点赞数:{{this.$store.state.newsdetail.agree}} {{this.$store.state.newsdetail.desc}}
后端程序增加点赞数，这里就不赘述了。只需返回一个json对象： 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
