溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時(shí)間：2020-08-23 09:32:16 來源：腳本之家 閱讀：132 作者：學(xué)習(xí)筆記666 欄目：web開發(fā)

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

回顧

以前我們?cè)谧鲞@個(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){
        // 請(qǐng)求服務(wù)器獲取數(shù)據(jù)
        this.$http.get("http://localhost/news.php").then(function (res) {
          this.$store.state.newslist = res.body;
        },function (res) {
          // 請(qǐng)求失敗處理
        })
      }
    }
  }

組件生命周期（創(chuàng)建）里請(qǐ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"

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

數(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 的記錄。

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

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

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

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

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

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手