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 技巧小结
Apr 02 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
JS判断是否长按某一键的方法
Mar 02 Javascript
AngularJS控制器详解及示例代码
Aug 16 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 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
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
PHP共享内存使用与信号控制实例分析
2018/05/09 PHP
php swoft框架实例用法
2020/12/22 PHP
javascript 写类方式之五
2009/07/05 Javascript
jQuery ajax serialize() 方法使用示例
2014/11/02 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
详解基于原生JS验证表单组件xy-form
2019/08/20 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python中requests模块的使用方法
2015/04/08 Python
详解Python中find()方法的使用
2015/05/18 Python
Python决策树分类算法学习
2017/12/22 Python
python实现跨excel的工作表sheet之间的复制方法
2018/05/03 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
python 将列表中的字符串连接成一个长路径的方法
2018/10/23 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
Python将字典转换为XML的方法
2020/08/01 Python
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
斯图尔特·韦茨曼鞋加拿大官网:Stuart Weitzman加拿大
2019/10/13 全球购物
电子信息毕业生自荐信
2013/11/16 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
生物科学专业自荐书
2014/06/20 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
数学教师求职信范文
2015/03/20 职场文书