如果你對 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 中存儲的 用戶數據給拿到了。