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 相关文章推荐
Javascript 强制类型转换函数
May 17 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
Mar 01 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
javascript中var的重要性分析
Feb 11 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
js获取元素的外链样式的简单实现方法
Jun 06 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 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
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
2016/06/21 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
2016/11/24 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
使用webpack构建应用的方法步骤
2019/03/04 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
python对字典进行排序实例
2014/09/25 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python中seaborn包常用图形使用详解
2019/11/25 Python
python对XML文件的操作实现代码
2020/03/27 Python
运动会广播稿300字
2014/01/10 职场文书
八年级美术教学反思
2014/02/02 职场文书
社区文明倡议书
2015/04/28 职场文书
茶花女读书笔记
2015/06/29 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书