回顧
以前我們在做這個新聞列表的時候，是一個寫死的數據
export default{ data(){ return{ newslist:[ {newsid:"101",pubtime:"2016-10-29",title:"探索之路",desc:"是手機團隊的探索之路"}, {newsid:"102",pubtime:"2016-10-28",title:"系統之戰",desc:"如何支持業務解決"}, {newsid:"103",pubtime:"2016-10-27",title:"大文件存儲",desc:"背后的你不得不知的技術"}, {newsid:"104",pubtime:"2016-10-26",title:"飛天進化",desc:"阿里巴巴技術委員會"}, ] } }, }然后在模板上循環：
<div class="page-header" v-for="news in newslist">
今天我們來學習從服務器獲取數據
news-list.vue:
export default{ created(){ if (this.$store.state.newslist.length == 0){ // 請求服務器獲取數據 this.$http.get("http://localhost/news.php").then(function (res) { this.$store.state.newslist = res.body; },function (res) { // 請求失敗處理 }) } } }組件生命周期（創建）里請求服務器獲取數據，然后保存到了state 里:
this.$store.state.newslist = res.body;
newslist 在實例化Vuex.Store 的時候定義，入口文件index.js里:
state:{ user_name:"", newslist:[] },組件模板上就要這樣循環了：
v-for="news in this.$store.state.newslist"
數據過濾
處理服務器返回來的數據，比如我們這里news.PHP 的返回的json數據:
我們要根據isdeleted 做數據過濾，不多說，先看代碼：
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 專門寫了一個方法，做了數據過濾處理，保留isdeleted為false 的記錄。
那么我們在組件模板上循環的時候也要修改一下了：
v-for="news in this.$store.getters.getNews"
過濾之后，只有2條數據了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
