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


Posted in Javascript onJune 28, 2017

回顾新闻详细页

很早我们的新闻详情页是在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>

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

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

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

其实就是更改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>

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
Vuex利用state保存新闻数据实例
Jun 28 #Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 #Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 #Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 #Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 #Javascript
vue2项目使用sass的示例代码
Jun 28 #Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 #Javascript
You might like
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP XML数据解析代码
2010/05/26 PHP
调整PHP的性能
2013/10/30 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
nodejs文件操作模块FS(File System)常用函数简明总结
2014/06/05 NodeJs
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
基于jquery插件实现拖拽删除图片功能
2020/08/27 Javascript
js实现浏览器倒计时跳转页面效果
2016/08/12 Javascript
简单几步实现返回顶部效果
2016/12/05 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
Python Socket编程入门教程
2014/07/11 Python
python搭建微信公众平台
2016/02/09 Python
Python图算法实例分析
2016/08/13 Python
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
Python装饰器用法实例总结
2018/05/26 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
教师绩效工资方案
2014/02/01 职场文书
小学数学课题方案
2014/06/15 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
天那边观后感
2015/06/09 职场文书
社区低保工作总结2015
2015/07/23 职场文书
MySQL 分页查询的优化技巧
2021/05/12 MySQL