Vuex利用国家保存新闻数据实例 - 行业资讯 - 肥雀云

回顾　　

以前我们在做这个新闻列表的时候,是一个写死的数据

　　　　　　出口默认{ 　　数据(){ 　　返回{ 　　newslist:( 　　{newsid:“101”, pubtime:“2016-10-29”,标题:“探索之路”,描述:“是手机团队的探索之路"}, 　　{newsid:“102”, pubtime:“2016-10-28”,标题:“系统之战”,描述:“如何支持业务解决"}, 　　{newsid:“103”, pubtime:“2016-10-27”,标题:“大文件存储”,描述:“背后的你不得不知的技术"}, 　　{newsid:“104”, pubtime:“2016-10-26”,标题:“飞天进化”,描述:“阿里巴巴技术委员会"}, 　　] 　　} 　　}, 　　} 　　　　

然后在模板上循环:

　　　　　　& lt; div类=耙趁肌眝=皀ewslist新闻”在　　　　

今天我们来学习从服务器获取数据

news-list.vue:

　　　　　　出口默认{ 　　创建(){ 　　如果(store.state.newslist美元。长度==0){//请求服务器获取数据　　http.get美元。(“http://localhost/news.php”)。然后(函数(res) { 　　store.state美元。newslist=res.body; 　　},函数(res) {//请求失败处理　　}）　　} 　　} 　　} 　　　　之前　　　　

组件生命周期(创建)里请求服务器获取数据,然后保存到了国家里:

　　　　　　store.state美元。newslist=res.body; 　　　　

newslist在实例化Vuex。商店的时候定义,入口文件index.js里:

　　　　　　状态:{ 　　user_name:“”, 　　newslist: [] 　　}, 　　　　

组件模板上就要这样循环了:

　　　　　　v代表=靶挛舠tore.state.newslist美元。” 　　　　

Vuex利用国家保存新闻数据实例

<强>数据过滤

处理服务器返回来的数据,比如我们这新闻里。PHP的返回的json数据:

代码如下:
　　[{" id ": 101,“pubtime”:“2016-10-29”,“标题”:“探索之路”,“desc”:“是手机团队的探索之路”,“isdeleted”:假},{" id ": 102年,“pubtime”:“2016-10-29”,“标题”:“排行榜”、“desc”:“如何支持业务接入?选择什么存储引擎?”,“isdeleted”:假},{" id ": 103年,“pubtime”:“2016-10-29”,“标题”:“大文件存储”、“desc”:“讲大型二进制文件存储,只包含那些文件的轻量级引用”、“isdeleted”:真正}]
　　

我们要根据isdeleted做数据过滤,不多说,先看代码:

　　　　　　从“进口Vuex Vuex '; 　　Vue.use (Vuex); 　　　　const vuex_store=new Vuex.Store ({ 　　状态:{ 　　user_name:“”, 　　newslist: [] 　　}, 　　突变:{ 　　showUserName(状态){ 　　警报(state.user_name); 　　} 　　}, 　　getter: { 　　getNews(状态){ 　　state.newslist返回。过滤器(函数(新闻){ 　　返回! news.isdeleted; 　　}）　　} 　　} 　　}）　　　　之前　　　　

<代码> getter 专门写了一个方法,做了数据过滤处理,保留isdeleted为错误的记录。

那么我们在组件模板上循环的时候也要修改一下了:

　　　　　　v代表=靶挛舠tore.getters.getNews美元。” 　　　　

Vuex利用国家保存新闻数据实例”>,,
　　过滤之后,只有2条数据了 
　　
　　以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。<h2 class= Vuex利用国家保存新闻数据实例