快捷導(dǎo)航

VUE利用vuex模擬實現(xiàn)新聞點(diǎn)贊功能實例

更新時間：2017年06月28日 16:21:31 作者：學(xué)習(xí)筆記666

本篇文章主要介紹了VUE利用vuex模擬實現(xiàn)新聞點(diǎn)贊功能實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

回顧新聞詳細(xì)頁

很早我們的新聞詳情頁是在news-detail.vue 組件里，獲取服務(wù)器數(shù)據(jù)，然后把數(shù)據(jù)保持到組件的data 里，既然我們已經(jīng)用到了vuex，學(xué)習(xí)了它的state，我們就應(yīng)該想到把返回的數(shù)據(jù)交給state 來存儲。

1.首先在Vuex.Store 實例化的時候：

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

增加一個newsdetail 對象，newslist 數(shù)組是我們前面用來保存新聞列表數(shù)據(jù)的。

2.下面就要看在news-detail.vue 組件里，怎么請求數(shù)據(jù)，然后交給newsdatail ：

<script>
  export default{
    // 創(chuàng)建的時候[生命周期里]
    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; 就把服務(wù)器返回的新聞詳細(xì)數(shù)據(jù)保存起來了。

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

<div class="page-header">
  <h2>{{this.$store.state.newsdetail.title}}<small>{{this.$store.state.newsdetail.pubtime}}</small></h2>
  <p>點(diǎn)贊數(shù):{{this.$store.state.newsdetail.agree}} <button class="btn btn-success">點(diǎn)贊</button></p>
  <p>{{this.$store.state.newsdetail.desc}}</p>
</div>

這里寫圖片描述

這里我們要來實現(xiàn)一個點(diǎn)贊功能

點(diǎn)擊“點(diǎn)贊”按鈕，就更改點(diǎn)擊數(shù)。

其實就是更改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){
      // 進(jìn)行請求,獲取點(diǎn)贊后的agree字段屬性值
      Vue.http.post("http://localhost/agree.php",{newsid:newsid},{emulateJSON:true}).then(function (res) {
        // 處理業(yè)務(wù)
        // 調(diào)用上面setAgree方法更新點(diǎn)贊數(shù)
        context.commit("setAgree",res.body.agree);
      },function(){})
    }
  },
  getters:{
    getNews(state){
      return state.newslist.filter(function (news) {
        return !news.isdeleted;
      })
    }
  }
})

在actions 里定義了一個方法agree 發(fā)送網(wǎng)絡(luò)請求，獲取最新的點(diǎn)贊數(shù)。

同時mutations 里定義了一個setAgree 方法，用來同步頁面上的點(diǎn)贊數(shù)。

    agree(context,newsid){
      // 進(jìn)行請求,獲取點(diǎn)贊后的agree字段屬性值
      Vue.http.post("http://localhost/agree.php",{newsid:newsid},{emulateJSON:true}).then(function (res) {
        // 處理業(yè)務(wù)
        // 調(diào)用上面setAgree方法更新點(diǎn)贊數(shù)
        context.commit("setAgree",res.body.agree);
      },function(){})
    }

重點(diǎn)說明：這里發(fā)送http請求，和組件里不一樣，需要注意。

那么，組件里怎么調(diào)用這里的agree 方法呢？

<button class="btn btn-success" @click="submitAgree">點(diǎn)贊</button>

    methods:{
      submitAgree(){
        // 組件了調(diào)用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>點(diǎn)贊數(shù):{{this.$store.state.newsdetail.agree}} <button class="btn btn-success" @click="submitAgree">點(diǎn)贊</button></p>
        <p>{{this.$store.state.newsdetail.desc}}</p>
      </div>
    </div>
  </div>
</template>

 
 

<script>
  export default{
    // 創(chuàng)建的時候[生命周期里]
    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(){
        // 組件了調(diào)用actions里定義的agree方法
        this.$store.dispatch("agree",this.$store.state.newsdetail.id)
      }
    }
  }
</script>

這里寫圖片描述