溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
回顧
以前我們在做這個新聞列表的時候，是一個寫死的數據
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條數據了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
