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"

数据过滤

处理服务器返回来的数据，比如我们这里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"

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

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

赞 (0)

相关推荐

  • Vuex之理解state的用法实例

    1.什么是state? 上一篇文章说了,Vuex就是提供一个仓库,仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 响应书存储:state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新.(这里"状态"="数据"),也就是是说数据和视图是同步的. 2.局部状态 获取:在Vue组件中获

  • 详解vuex 中的 state 在组件中如何监听

    详解vuex 中的 state 在组件中如何监听

    前言 不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染. 问题举例 举例说明如下: // topo.vue created() { this.getUserAndSysIcons(); }, methods: { getUserAndSysIcons() { const self = this; // 用户图

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

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

    回顾 以前我们在做这个新闻列表的时候,是一个写死的数据 export default{ data(){ return{ newslist:[ {newsid:"101",pubtime:"2016-10-29",title:"探索之路",desc:"是手机团队的探索之路"}, {newsid:"102",pubtime:"2016-10-28",title:"系统之战"

  • vue中在vuex的actions中请求数据实例

    我废话不多说了,直接上代码吧! actions.js getCertificationStatus(context, {vm:vm,type:type}){ return new Promise((resolve, reject) => { axios.post('/realNameUtils/gotoStatusPage') .then((res)=>{ context.commit('certificationStatus',res.data.content) if(type=='1'){

  • 在Python中利用pickle保存变量的实例

    在工作中出于某些原因,我们可能需要将变量保存下来,这样下次就可以直接去赋值而不用重新执行某些重复耗时的操作了,这里我们用到了Python的pickle包来做变量的存储和变量加载,大家注意这个包是python自带的,不需要另外再去安装. pickle用法如下: pickle.dump(obj, file, protocol=None,*,fix_imports=True) pickle.load(file, *,fix_imports=True, encoding="ASCII". er

  • vue3使用vuex实现页面实时更新数据实例教程(setup)

    目录 前言 1.项目引入vue 2.main.js引入vuex 3.新建store文件夹 3.在传输数据的页面引入vuex (api.js) 4.渲染页面 总结 前言 我项目中使用ws获取数据,因为数据是不断更新的,vue页面只更新一次就不更新了,然后暂时只能想到vuex来保存更新状态,页面监听数据实现实时更新.下面是我测试时用的数据,没有用ws,用的是定时器模拟定时发送数据. 1.项目引入vue npm i vuex 2.main.js引入vuex import { createApp } f

  • C#利用Openxml读取Excel数据实例

    本文实例讲述了C#利用Openxml读取Excel数据的方法,分享给大家供大家参考.具体分析如下: 这里有些问题,如果当Cell 里面是 日期和浮点型的话,对应的Cell.DataType==Null,对应的时间会转换为一个浮点型,对于这块可以通过DateTime.FromOADate(double d)转换为时间. 可是缺点的地方就是,如果Cell.DataType ==NULL, 根本无法确认这个数据到底是 浮点型还是[被转换为了日期的浮点数].查阅了很多国外资料,的确国外博客有一部分都反映

  • vuex提交state&&实时监听state数据的改变方法

    项目背景 websocket长连接 根据指示进行四个页面之间的跳转,在各页面执行相应的逻辑处理. 项目搭建结构如下所示: 解决方案 在四个页面外面写个父页面,router路径如下所示: vuex \src\store\mutations.js //存储到vuex里面 [WEBSOCKETDATA](state,socketdata){ state.socketData=null;//vue监听不到数组的改变 所以清空重置一下就好咯 state.socketData=socketdata } \s

  • vuex操作state对象的实例代码

    Vuex是什么? VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vue有五个核心概念,state, getters, mutations, actions, modules. 总结 state => 基本数据 getters => 从基本数据派生的数据 mutations => 提交更改数据的方法,同步! actions => 像一个装饰器,包裹mutations,使之可以

  • TensorFlow利用saver保存和提取参数的实例

    在训练循环中,定期调用 saver.save() 方法,向文件夹中写入包含了当前模型中所有可训练变量的 checkpoint 文件. saver.save(sess, FLAGS.train_dir, global_step=step) global_step是训练的第几步 保存参数: import tensorflow as tf W = tf.Variable([[1, 2, 3]], dtype=tf.float32) b = tf.Variable([[1]], dtype=tf.flo

  • Struts2.5 利用Ajax将json数据传值到JSP的实例

    AJAX +JSON=>JSP AJAX  AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. JSON JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规

  • python使用numpy读取、保存txt数据的实例

    1.首先生成array数组 import numpy as np a = np.random.rand(5,5) print(a) 结果: array([[0.17374613, 0.87715267, 0.93111376, 0.53415215, 0.59667207], [0.6865835 , 0.15873242, 0.2842251 , 0.73840834, 0.37163279], [0.06556834, 0.68446787, 0.91136611, 0.82796704,

随机推荐