VUE利用vuex模拟实现新闻点赞功能实例
2017-06-28 16:21
751 查看
回顾新闻详细页
很早我们的新闻详情页是在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}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章推荐
- Vuex速学篇:(3)利用vuex模拟实现新闻点赞功能
- Vuex速学篇:(3)利用vuex模拟实现新闻点赞功能
- 基于Django框架利用Ajax实现点赞功能实例代码
- Vue实现搜索 和新闻列表功能简单范例
- vue 实现边输入边搜索功能的实例讲解
- php+mysql结合Ajax实现点赞功能完整实例
- Android开发之多线程中实现利用自定义控件绘制小球并完成小球自动下落功能实例
- 使用Vue-Router 2实现路由功能实例详解
- Vuejs 实现简易 todoList 功能 与 组件实例代码
- 利用solr实现商品的搜索功能(实例讲解)
- System.Threading.Mutex:一台电脑上面只有一个进程实例在运行,利用Mutex互斥量可以实现了这个功能
- 利用JavaScript实现新闻滚动效果(实例代码)
- vue利用路由控制实现登录功能
- vue中子组件向父组件传递数据的实例代码(实现加减功能)
- 利用VUE框架,实现列表分页功能示例代码
- ArrayList利用迭代器Iterator遍历方法实现数据(新闻)的删除、添加、显示功能例子
- python利用有道翻译实现"语言翻译器"的功能实例
- php+xml结合Ajax实现点赞功能完整实例
- java利用Socket实现聊天室功能实例
- 利用JavaScript实现新闻滚动效果(实例代码)