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示例收集
Nov 05 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
javascript smipleChart 简单图标类
Jan 12 Javascript
javascript实现2048游戏示例
May 04 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
vue中的watch监听数据变化及watch中各属性的详解
Sep 11 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
js利用iframe实现选项卡效果
Aug 09 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
对node.js中render和send的用法详解
2018/05/14 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
在Python中使用列表生成式的教程
2015/04/27 Python
详解python的argpare和click模块小结
2019/03/31 Python
pycharm显示远程图片的实现
2019/11/04 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
Python实现封装打包自己写的代码,被python import
2020/07/12 Python
社区版pycharm创建django项目的方法(pycharm的newproject左侧没有项目选项)
2020/09/23 Python
python 简单的调用有道翻译
2020/11/25 Python
巴黎一票通:The Paris Pass
2018/02/10 全球购物
药学专业学生的自我评价分享
2014/02/06 职场文书
应届生自荐信范文
2014/02/21 职场文书
司法建议书范文
2014/05/13 职场文书
公司搬迁通知
2015/04/20 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android