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

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

這篇接著上一篇：

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

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

如下圖所示，有個 /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 中存儲的 用戶數據給拿到了。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的vue调用接口获取后台数据_Vuex 存储||获取后台接口数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。