Vuex利用state保存新聞數(shù)據(jù)實例
回顧
以前我們在做這個新聞列表的時候，是一個寫死的數(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ù):
[{"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)文章
Vue包大小優(yōu)化的實現(xiàn)(從1.72M到94K)
這篇文章主要介紹了Vue包大小優(yōu)化的實現(xiàn)(從1.72M到94K)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要為大家詳細(xì)介紹了Vue的組件化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue內(nèi)置動態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動態(tài)組件component使用示例小結(jié),需要的朋友可以參考下2024-03-03
初學(xué)vue出現(xiàn)空格警告的原因及其解決方案
今天小編就為大家分享一篇初學(xué)vue出現(xiàn)空格警告的原因及其解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue動態(tài)設(shè)置圖片時src不生效的原因及解決方法
這篇文章主要介紹了Vue動態(tài)設(shè)置圖片時src不生效的原因及解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vuex之this.$store.dispatch()與this.$store.commit()的區(qū)別及說明
這篇文章主要介紹了vuex之this.$store.dispatch()與this.$store.commit()的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Echarts，它是一個與框架無關(guān)的?JS?圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue數(shù)組中出現(xiàn)__ob__:Observer無法取值問題的解決方法
__ob__: Observer這個屬性其實是Vue監(jiān)控變量產(chǎn)生的,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)組中出現(xiàn)__ob__:?Observer無法取值問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
el-form的label和表單自適應(yīng)填滿一行且靠左對齊方式
這篇文章主要介紹了el-form的label和表單自適應(yīng)填滿一行且靠左對齊方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了淺談Vue SSR中的Bundle的具有使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11