欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vuex利用state保存新聞數(shù)據(jù)實例

 更新時間：2017年06月28日 15:47:39   作者：學(xué)習(xí)筆記666  
本篇文章主要介紹了Vuex利用state保存新聞數(shù)據(jù)實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

這里寫圖片描述

回顧

以前我們在做這個新聞列表的時候，是一個寫死的數(shù)據(jù)

  export default{
    data(){
      return{
        newslist:[
          {newsid:"101",pubtime:"2016-10-29",title:"探索之路",desc:"是手機(jī)團(tuán)隊的探索之路"},
          {newsid:"102",pubtime:"2016-10-28",title:"系統(tǒng)之戰(zhàn)",desc:"如何支持業(yè)務(wù)解決"},
          {newsid:"103",pubtime:"2016-10-27",title:"大文件存儲",desc:"背后的你不得不知的技術(shù)"},
          {newsid:"104",pubtime:"2016-10-26",title:"飛天進(jìn)化",desc:"阿里巴巴技術(shù)委員會"},
        ]
      }
    },
  }

然后在模板上循環(huán)：

<div class="page-header" v-for="news in newslist">

今天我們來學(xué)習(xí)從服務(wù)器獲取數(shù)據(jù)

news-list.vue:

  export default{
    created(){
      if (this.$store.state.newslist.length == 0){
        // 請求服務(wù)器獲取數(shù)據(jù)
        this.$http.get("http://localhost/news.php").then(function (res) {
          this.$store.state.newslist = res.body;
        },function (res) {
          // 請求失敗處理
        })
      }
    }
  }

組件生命周期（創(chuàng)建）里請求服務(wù)器獲取數(shù)據(jù)，然后保存到了state 里:

this.$store.state.newslist = res.body;

newslist 在實例化Vuex.Store 的時候定義，入口文件index.js里:

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

組件模板上就要這樣循環(huán)了：

v-for="news in this.$store.state.newslist"

這里寫圖片描述

數(shù)據(jù)過濾

處理服務(wù)器返回來的數(shù)據(jù)，比如我們這里news.PHP 的返回的json數(shù)據(jù):

復(fù)制代碼 代碼如下:

[{"id":101,"pubtime":"2016-10-29","title":"探索之路","desc":"是手機(jī)團(tuán)隊的探索之路","isdeleted":false},{"id":102,"pubtime":"2016-10-29","title":"排行榜","desc":"如何支持業(yè)務(wù)接入？選擇什么存儲引擎？","isdeleted":false},{"id":103,"pubtime":"2016-10-29","title":"大文件存儲","desc":"講大型二進(jìn)制文件存儲，只包含那些文件的輕量級引用","isdeleted":true}]

我們要根據(jù)isdeleted 做數(shù)據(jù)過濾，不多說，先看代碼：

import Vuex from 'vuex';
Vue.use(Vuex);

const vuex_store = new Vuex.Store({
  state:{
    user_name:"",
    newslist:[]
  },
  mutations:{
    showUserName(state){
      alert(state.user_name);
    }
  },
  getters:{
    getNews(state){
      return state.newslist.filter(function (news) {
        return !news.isdeleted;
      })
    }
  }
})

getters 專門寫了一個方法，做了數(shù)據(jù)過濾處理，保留isdeleted為false 的記錄。

那么我們在組件模板上循環(huán)的時候也要修改一下了：

v-for="news in this.$store.getters.getNews"

這里寫圖片描述  

過濾之后，只有2條數(shù)據(jù)了

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論