Vuex利用state保存新闻数据实例

发布时间：2020-12-17 02:54:26 所属栏目：百科来源：网络整理

导读：p style="text-align: center" 回顾以前我们在做这个新闻列表的时候，是一个写死的数据然后在模板上循环：今天我们来学习从服务器获取数据 news-list.vue: 组件生命周期（创建）里请求服务器获取数据，然后保存到了state 里: newslist 在实例化Vuex.Store

这里写图片描述

回顾

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

然后在模板上循环：

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

news-list.vue:

组件生命周期（创建）里请求服务器获取数据，然后保存到了state 里:

newslist 在实例化Vuex.Store 的时候定义，入口文件index.js里:

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

这里写图片描述

数据过滤

处理服务器返回来的数据，比如我们这里news.PHP 的返回的json数据:

代码如下:

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

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

getters 专门写了一个方法，做了数据过滤处理，保留isdeleted为false 的记录。

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

这里写图片描述

过滤之后，只有2条数据了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!