Vuex利用state保存新聞數(shù)據(jù)實(shí)例

更新時(shí)間：2017年06月28日 15:47:39 作者：學(xué)習(xí)筆記666

本篇文章主要介紹了Vuex利用state保存新聞數(shù)據(jù)實(shí)例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

這里寫圖片描述

回顧

以前我們在做這個(gè)新聞列表的時(shí)候，是一個(gè)寫死的數(shù)據(jù)

  export default{
    data(){
      return{
        newslist:[
          {newsid:"101",pubtime:"2016-10-29",title:"探索之路",desc:"是手機(jī)團(tuán)隊(duì)的探索之路"},
          {newsid:"102",pubtime:"2016-10-28",title:"系統(tǒng)之戰(zhàn)",desc:"如何支持業(yè)務(wù)解決"},
          {newsid:"103",pubtime:"2016-10-27",title:"大文件存儲(chǔ)",desc:"背后的你不得不知的技術(shù)"},
          {newsid:"104",pubtime:"2016-10-26",title:"飛天進(jìn)化",desc:"阿里巴巴技術(shù)委員會(huì)"},
        ]
      }
    },
  }

然后在模板上循環(huán)：

<div class="page-header" v-for="news in newslist">

今天我們來學(xué)習(xí)從服務(wù)器獲取數(shù)據(jù)

news-list.vue:

  export default{
    created(){
      if (this.$store.state.newslist.length == 0){
        // 請求服務(wù)器獲取數(shù)據(jù)
        this.$http.get("http://localhost/news.php").then(function (res) {
          this.$store.state.newslist = res.body;
        },function (res) {
          // 請求失敗處理
        })
      }
    }
  }

組件生命周期（創(chuàng)建）里請求服務(wù)器獲取數(shù)據(jù)，然后保存到了state 里:

this.$store.state.newslist = res.body;

newslist 在實(shí)例化Vuex.Store 的時(shí)候定義，入口文件index.js里:

  state:{
    user_name:"",
    newslist:[]
  },

組件模板上就要這樣循環(huán)了：

v-for="news in this.$store.state.newslist"

這里寫圖片描述

數(shù)據(jù)過濾

處理服務(wù)器返回來的數(shù)據(jù)，比如我們這里news.PHP 的返回的json數(shù)據(jù):

復(fù)制代碼代碼如下:

[{"id":101,"pubtime":"2016-10-29","title":"探索之路","desc":"是手機(jī)團(tuán)隊(duì)的探索之路","isdeleted":false},{"id":102,"pubtime":"2016-10-29","title":"排行榜","desc":"如何支持業(yè)務(wù)接入？選擇什么存儲(chǔ)引擎？","isdeleted":false},{"id":103,"pubtime":"2016-10-29","title":"大文件存儲(chǔ)","desc":"講大型二進(jìn)制文件存儲(chǔ)，只包含那些文件的輕量級(jí)引用","isdeleted":true}]

我們要根據(jù)isdeleted 做數(shù)據(jù)過濾，不多說，先看代碼：

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 專門寫了一個(gè)方法，做了數(shù)據(jù)過濾處理，保留isdeleted為false 的記錄。

那么我們在組件模板上循環(huán)的時(shí)候也要修改一下了：

v-for="news in this.$store.getters.getNews"

這里寫圖片描述

過濾之后，只有2條數(shù)據(jù)了

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vuex
state

相關(guān)文章

Vue包大小優(yōu)化的實(shí)現(xiàn)(從1.72M到94K)
這篇文章主要介紹了Vue包大小優(yōu)化的實(shí)現(xiàn)(從1.72M到94K)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
一起來學(xué)習(xí)Vue的組件化
這篇文章主要為大家詳細(xì)介紹了Vue的組件化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
vue內(nèi)置動(dòng)態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動(dòng)態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動(dòng)態(tài)組件component使用示例小結(jié),需要的朋友可以參考下
2024-03-03
初學(xué)vue出現(xiàn)空格警告的原因及其解決方案
今天小編就為大家分享一篇初學(xué)vue出現(xiàn)空格警告的原因及其解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
Vue動(dòng)態(tài)設(shè)置圖片時(shí)src不生效的原因及解決方法
這篇文章主要介紹了Vue動(dòng)態(tài)設(shè)置圖片時(shí)src不生效的原因及解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
vuex之this.$store.dispatch()與this.$store.commit()的區(qū)別及說明
這篇文章主要介紹了vuex之this.$store.dispatch()與this.$store.commit()的區(qū)別及說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue引入echarts方法與使用介紹
Echarts，它是一個(gè)與框架無關(guān)的?JS?圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-08-08
Vue數(shù)組中出現(xiàn)__ob__:Observer無法取值問題的解決方法
__ob__: Observer這個(gè)屬性其實(shí)是Vue監(jiān)控變量產(chǎn)生的,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)組中出現(xiàn)__ob__:?Observer無法取值問題的解決方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
el-form的label和表單自適應(yīng)填滿一行且靠左對(duì)齊方式
這篇文章主要介紹了el-form的label和表單自適應(yīng)填滿一行且靠左對(duì)齊方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
淺談Vue SSR中的Bundle的具有使用
這篇文章主要介紹了淺談Vue SSR中的Bundle的具有使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11