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 相关文章推荐
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
javascript hashtable 修正版 下载
Dec 30 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
Aug 23 Javascript
js如何取消事件冒泡
Sep 23 Javascript
DOM 事件流详解
Jan 20 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 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开发中常用的字符串操作函数
2011/02/08 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
PHP实现页面静态化深入讲解
2021/03/04 PHP
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
2015/06/10 Javascript
jquery动态导航插件dynamicNav用法实例分析
2015/09/06 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
python检测lvs real server状态
2014/01/22 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Django 视图层(view)的使用
2018/11/09 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
200行python代码实现2048游戏
2019/07/17 Python
Python实现图片添加文字
2019/11/26 Python
python对XML文件的操作实现代码
2020/03/27 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
T3官网:头发造型工具
2019/12/26 全球购物
教师考核材料
2014/05/21 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
置业顾问岗位职责
2015/02/09 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android
python中redis包操作数据库的教程
2022/04/19 Python
VUE递归树形实现多级列表
2022/07/15 Vue.js