VUE利用vuex模拟实现新闻点赞功能实例
更新时间：2017年06月28日 16:21:31 作者：学习笔记666
本篇文章主要介绍了VUE利用vuex模拟实现新闻点赞功能实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
回顾新闻详细页
很早我们的新闻详情页是在news-detail.vue 组件里，获取服务器数据，然后把数据保持到组件的data 里，既然我们已经用到了vuex，学习了它的state，我们就应该想到把返回的数据交给state 来存储。
1.首先在Vuex.Store 实例化的时候：
state:{
user_name:"",
newslist:[],
newsdetail:{}
},
增加一个newsdetail 对象，newslist 数组是我们前面用来保存新闻列表数据的。
2.下面就要看在news-detail.vue 组件里，怎么请求数据，然后交给newsdatail ：
<script>
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){
// 处理请求失败
});
},
}
</script>
通过this.$store.state.newsdetail = res.body; 就把服务器返回的新闻详细数据保存起来了。
3.那么模板上怎么展示？
<div class="page-header">
<h2>{{this.$store.state.newsdetail.title}}<small>{{this.$store.state.newsdetail.pubtime}}</small></h2>
<p>点赞数:{{this.$store.state.newsdetail.agree}} <button class="btn btn-success">点赞</button></p>
<p>{{this.$store.state.newsdetail.desc}}</p>
</div>
这里我们要来实现一个点赞功能
点击“点赞”按钮，就更改点击数。
其实就是更改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){
// 进行请求,获取点赞后的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 方法，用来同步页面上的点赞数。
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 方法呢？
<button class="btn btn-success" @click="submitAgree">点赞</button>
methods:{
submitAgree(){
// 组件了调用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">
<h2>{{this.$store.state.newsdetail.title}}<small>{{this.$store.state.newsdetail.pubtime}}</small></h2>
<p>点赞数:{{this.$store.state.newsdetail.agree}} <button class="btn btn-success" @click="submitAgree">点赞</button></p>
<p>{{this.$store.state.newsdetail.desc}}</p>
</div>
</div>
</div>
</template>
<script>
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){
// 处理请求失败
});
},
methods:{
submitAgree(){
// 组件了调用actions里定义的agree方法
this.$store.dispatch("agree",this.$store.state.newsdetail.id)
}
}
}
</script>
后端程序增加点赞数，这里就不赘述了。只需返回一个json对象：
{"status":"success","agree":100}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 实现图片懒加载功能的方法，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
随着 Vite2 的发布并日趋稳定，现在越来越多的项目开始尝试使用它。本文我们就介绍了Vite创建项目的实现步骤，感兴趣的可以了解一下2021-07-07
在vue中使用Echarts利用watch做动态数据渲染操作
这篇文章主要介绍了在vue中使用Echarts利用watch做动态数据渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了ElementUI Tag组件实现多标签生成的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
vue安装node-sass和sass-loader报错问题的解决办法
这篇文章主要给大家介绍了关于vue安装node-sass和sass-loader报错问题的解决办法,文中通过图文以及示例代码将解决的方法介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-01-01
vue element ui Select选择器如何设置默认状态
这篇文章主要介绍了vue element ui Select选择器如何设置默认状态问题,具有很好的参考价值,希望对大家有所帮助,2023-10-10
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架，本文主要介绍了VUEX如何使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
这篇文章主要介绍了Vue项目通过network的ip地址访问注意事项及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
使用Vue的脚手架搭建的前端项目，通常都使用Axios封装的接口请求，项目中引入的方式不做多介绍，本文主要介绍接口调用与不同形式的传参方法。对Vue + Axios 请求接口方法与传参问题感兴趣的朋友一起看看吧2021-12-12
这篇文章主要介绍了vue computed的缓存实现原理，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-04-04
最新评论