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


Posted in Javascript onJune 28, 2017

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

回顾

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

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"

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

数据过滤

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

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

我们要根据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"

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
js实现通用的微信分享组件示例
Mar 10 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
微信浏览器禁止页面下拉查看网址实例详解
Jun 28 #Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 #Javascript
webpack学习--webpack经典7分钟入门教程
Jun 28 #Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 #Javascript
vue2项目使用sass的示例代码
Jun 28 #Javascript
微信小程序之网络请求简单封装实例详解
Jun 28 #Javascript
详解webpack+angular2开发环境搭建
Jun 28 #Javascript
You might like
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
js document.write()使用介绍
2014/02/21 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
python创建进程fork用法
2015/06/04 Python
Python Socket使用实例
2017/12/18 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
Django权限设置及验证方式
2020/05/13 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
给校长的建议书300字
2014/05/16 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
国际贸易系求职信
2014/08/09 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
2014年客房部工作总结
2014/11/22 职场文书
2019公司管理制度
2019/04/19 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
Python实现照片卡通化
2021/12/06 Python
canvas 中如何实现物体的框选
2022/08/05 Javascript