阿坝州网站建设公司

VUE如何使用vuex模拟实现新闻点赞功能

这篇文章主要介绍VUE如何使用vuex模拟实现新闻点赞功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站建设、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的永嘉网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

回顾新闻详细页

很早我们的新闻详情页是在news-detail.vue 组件里，获取服务器数据，然后把数据保持到组件的data 里，既然我们已经用到了vuex，学习了它的state，我们就应该想到把返回的数据交给state 来存储。

1.首先在Vuex.Store 实例化的时候：

  state:{
    user_name:"",
    newslist:[],
    newsdetail:{}
  },

增加一个newsdetail 对象，newslist 数组是我们前面用来保存新闻列表数据的。

2.下面就要看在news-detail.vue 组件里，怎么请求数据，然后交给newsdatail ：

通过this.$store.state.newsdetail = res.body; 就把服务器返回的新闻详细数据保存起来了。

3.那么模板上怎么展示？


  
{{this.$store.state.newsdetail.title}}{{this.$store.state.newsdetail.pubtime}}

  
点赞数:{{this.$store.state.newsdetail.agree}} 点赞

  
{{this.$store.state.newsdetail.desc}}

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 方法呢？

点赞
methods:{
      submitAgree(){
        // 组件了调用actions里定义的agree方法
        this.$store.dispatch("agree",this.$store.state.newsdetail.id)
      }
    }

news-detail.vue 组件全部代码：



 
 

VUE如何使用vuex模拟实现新闻点赞功能 

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

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

以上是“VUE如何使用vuex模拟实现新闻点赞功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


分享名称：VUE如何使用vuex模拟实现新闻点赞功能
文章链接：http://azwzsj.com/article/jsdceh.html

其他资讯