[轉]Vuex 存儲||獲取后台接口數據


如果你對 Vuex 有一定的了解的話呢,可以繼續這一篇的學習了,如果沒有的話,

建議先看一看我的上一篇 Vuex基礎:地址在下面

Vuex的詳解與使用

Vuex刷新數據不丟失

這篇接着上一篇:

   這篇將利用到 Vuex的詳解與使用和Vuex刷新數據不丟失兩篇的內容結合;

1、首先我們先找個可以測試用的接口,這里我放一個我經常測試接口的一個地址:

   http://jsonplaceholder.typicode.com/ 

  如下圖所示,有個 /users 那么很顯然,里面存放的用戶數據,那么我們今天就用這個,

  你請求接口的地址就是,http://jsonplaceholder.typicode.com/users ,/user 就是接在地址后面的,

  好了,廢話不多說繼續吧。

services.js 是我封裝的 axios,下面的 getUser 就是獲取用戶信息的方法

 

2、現在我們開始在頁面里面請求這個接口了:

這里我寫的 sessionStorage.setItem("UserList",JSON.stringify(this.userList)); 

  意思是:將this.userList 也就是請求的用戶的數據 轉為字符串,"UserList" 就是將用戶的數據 命名為 UserList 存放到 sessionStorage中,

  請求到的數據,我都打印出來給你們看看;

 

  現在我們看看,在SessionStorage 中的狀態,UserList 對應的 value數據都有。存儲成功,

 

 

  3、  現在,我們去放到 Vuex 中:

    state 中的 userList 用戶數據,這里 sessionStorage.getItem('UserList') 是獲取 sessionStorage.getItem 中名位 'UserList' 的數據們

    同時,getters 里面也配置一下

   

    

    現在我們來驗證一下,是否在Vuex里面操作成功;

    我們在,...mapGetters 中 添加

 

   然后去寫個循環,把數組里面的所有name 遍歷出來

 

 

 現在,我們去頁面上看看效果。

  很好,成功的將 Vuex 中存儲的 用戶數據給拿到了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM