vue對storejs獲取數據進行處理時遇到的問題有哪些

這篇文章主要介紹vue對storejs獲取數據進行處理時遇到的問題有哪些，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

具體代碼如下所示：

export default {
  data(){
    return {
      shopList:{},
      isEmpty:false, //判斷購物車中是否有存在內容
    }
  },
  created(){
    if(!store.get('?shopCar')){
      this.isEmpty = true;
    }else{
      //對數據處理 將商店中名中的地址分離出來
      this.shopList = store.get('shopCar');
      console.log(this.shopList)
    }
  }  
}

這個時候打印出來：

this.shopList 顯示的結果為 {ob: Observer}

雖然可以在vue中直接使用如下：

<ul>
  <li v-for = "list in shopList" :key = "list.id">
    {{list}}
  </li>
</ul>

但是如果此時我想對this.shopList中的數據進行處理，就會出現問題，此時如果你想遍歷循環該數據，就會出現意想不到的效果，因為此時打印 this.shopList.length 顯示出來的結果為undefined。

遍歷對象有幾種方法：

1，最常用的 for循環 ，但此時length為undefined，該方法不可用；

2，for in 同上原因不可使用

3. jquery中也有遍歷對象的方法 $.each(this.shopList,function(n,i){})

你會發先第三種可以遍歷這個數據，那么就可以實現數據的處理了。

但是如果你的this.shopList這個對象中又包含了一層對象呢？.each()中再包含一層.each()中再包含一層.each(),不就可以解決這種問題了嗎？除了這種方法外，有種更好的辦法：

created(){
    if(!store.get('?shopCar')){
      this.isEmpty = true;
    }else{
      //對數據處理 將商店中名中的地址分離出來
      var shopList = store.get('shopCar')
      $.each(shopList,function(n,i){
        //處理數據。。。。。
      })
      this.shopList = shopList;
      console.log(this.shopList)
    }
  }

更簡單直接的辦法是，將數據先賦值給一個變量，將數據處理為你想要的格式之后，再復制給this.shopList即可。

為什么我們直接將數據賦值給this.shopList就不可以對數據進行處理了呢？

原因是當你將數據賦值給this.shopList，即實現了vue的數據的雙向綁定。

以上是“vue對storejs獲取數據進行處理時遇到的問題有哪些”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！