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里使用Dom操作Xml
Jan 22 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 Javascript
JS和函数式语言的三特性
Mar 05 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
JS实现瀑布流布局
Oct 21 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
angular 内存溢出的问题解决
Jul 12 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 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中SSO Cookie登录分析和实现
2015/11/06 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
图片完美缩放
2006/09/07 Javascript
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
Extjs入门之动态加载树代码
2010/04/09 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
jsonp跨域获取数据的基础教程
2018/07/01 Javascript
javascript异步处理与Jquery deferred对象用法总结
2019/06/04 jQuery
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
django静态文件加载的方法
2018/05/20 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
python使用turtle绘制分形树
2018/06/22 Python
python中必要的名词解释
2019/11/20 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
DRF框架API版本管理实现方法解析
2020/08/21 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
介绍一下如何优化MySql
2016/12/20 面试题
一道输出判断型Java面试题
2014/10/01 面试题
网络事业创业计划书范文
2014/01/09 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
JavaScript实现队列结构过程
2021/12/06 Javascript