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 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
webapp框架AngularUI的demo改造之路
Dec 21 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
小程序实现搜索框功能
Mar 26 Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 Javascript
js实现直播点击飘心效果
Aug 19 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中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
PHP print类函数使用总结
2010/06/25 PHP
深入PHP FTP类的详解
2013/06/13 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
document.getElementById介绍
2011/09/13 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
Js Jquery创建一个弹出层可加载一个页面
2014/05/08 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
JavaScript多态与封装实例分析
2018/07/27 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
VUE安装使用教程详解
2019/06/03 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
antd Select下拉菜单动态添加option里的内容操作
2020/11/02 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
python生成随机密码或随机字符串的方法
2015/07/03 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
python获取程序执行文件路径的方法(推荐)
2018/04/26 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
关于python字符串方法分类详解
2019/08/20 Python
Python如何访问字符串中的值
2020/02/09 Python
办公室主任主任岗位责任制
2014/02/11 职场文书
寒假家长评语大全
2014/04/16 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
2014年团总支工作总结
2014/11/21 职场文书
整改通知书格式
2015/04/22 职场文书
MySQL表字段时间设置默认值
2021/05/13 MySQL
关于CSS浮动与取消浮动的问题
2021/06/28 HTML / CSS