日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

當構建Vue.js應用程序并切程序達到一定的規(guī)模時，可能會有全局狀態(tài)管理的需求。方便的是，核心開發(fā)團隊提供Vuex，它是 Vue.js 應用程序?qū)嶋H的狀態(tài)管理庫。

“只有客戶發(fā)展了，才有我們的生存與發(fā)展！”這是創(chuàng)新互聯(lián)公司的服務宗旨！把網(wǎng)站當作互聯(lián)網(wǎng)產(chǎn)品，產(chǎn)品思維更注重全局思維、需求分析和迭代思維，在網(wǎng)站建設中就是為了建設一個不僅審美在線，而且實用性極高的網(wǎng)站。創(chuàng)新互聯(lián)對成都網(wǎng)站建設、網(wǎng)站設計、網(wǎng)站制作、網(wǎng)站開發(fā)、網(wǎng)頁設計、網(wǎng)站優(yōu)化、網(wǎng)絡推廣、探索永無止境。

VUE入門并不是很難，假設你已經(jīng)熟悉實現(xiàn) Vuex。這篇文章畢竟不是關于新手的。如果您需要，那么我建議您查看文檔。

Vuex 的使用使得的管理全局數(shù)據(jù)存儲變得更加簡單，對于以下示例，假設有一個類似以下內(nèi)容的存儲：

 
 
 
 

  
  
  
  
import Vue from 'vue' 
  
  
  
  
import Vuex from 'vuex' 
  
  
  
  
Vue.use(Vuex) 
  
  
  
  
const store = new Vuex.Store({ 
  
  
  
  
  state: { 
  
  
  
  
    user: null 
  
  
  
  
  }, 
  
  
  
  
  mutations: { 
  
  
  
  
    setUser (state, user) { 
  
  
  
  
      state.user = user 
  
  
  
  
    } 
  
  
  
  
  }, 
  
  
  
  
}) 
 
 
 
 

存儲區(qū)的狀態(tài)從一個空user對象開始， setUser可以更新狀態(tài)。然后在我們的應用程序中，顯示用戶詳細信息：

因此，當應用程序加載時，如果用戶已登錄，它會向用戶顯示“Hi，用戶名，welcome back!”的消息。否則，提示用戶需要登錄，這是一個很小的例子。

但是，問題來了，假如有幾個選項的時候，又該如何解決呢？

設置初始狀態(tài)

預先填充全局存儲的最簡單方法是在創(chuàng)建存儲時設置初始狀態(tài)：

 
 
 
 

  
  
  
  
import Vue from 'vue' 
  
  
  
  
import Vuex from 'vuex' 
  
  
  
  
 
  
  
  
  
Vue.use(Vuex) 
  
  
  
  
 
  
  
  
  
const store = new Vuex.Store({ 
  
  
  
  
  state: { 
  
  
  
  
    user: { name: "Austin" } 
  
  
  
  
  }, 
  
  
  
  
  mutations: { 
  
  
  
  
    setUser (user) { 
  
  
  
  
      state.user = user 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
}) 
 
 
 
 

顯然，這只有在您提前知道有關用戶的詳細信息時才可以。在構建應用程序時，我們可能不知道用戶的姓名，但還有另一種選擇。

我們可以利用本地存儲來保留用戶信息的副本。當他們登錄時，在 本地存儲中設置詳細信息，當他們注銷時，從本地存儲中刪除詳細信息即可。

當應用加載時，您可以將用戶詳細信息從本地存儲初始狀態(tài)拉入初始狀態(tài)：

 
 
 
 

  
  
  
  
import Vue from 'vue' 
  
  
  
  
import Vuex from 'vuex' 
  
  
  
  
 
  
  
  
  
Vue.use(Vuex) 
  
  
  
  
 
  
  
  
  
const store = new Vuex.Store({ 
  
  
  
  
  state: { 
  
  
  
  
    user: localStorage.get('user') 
  
  
  
  
  }, 
  
  
  
  
  mutations: { 
  
  
  
  
    setUser (user) { 
  
  
  
  
      state.user = user 
  
  
  
  
    } 
  
  
  
  
  } 
  
  
  
  
}) 
 
 
 
 

如果您使用的數(shù)據(jù)不需要非常嚴格的安全限制，那么這樣做是可以實現(xiàn)。我建議使用vuex-persistedstate庫來幫助實現(xiàn)自動化。

注意，永遠不要將非常敏感的數(shù)據(jù)（如身份驗證令牌）存儲在本地存儲中，因為它可能會受到XSS的 攻擊。因此，上述的例子適用于用戶名，但不適用于身份驗證令牌之類的東西（它仍然可以是 Vuex，只是不持久化）。

安裝應用程序時請求數(shù)據(jù)

現(xiàn)在假設，不將數(shù)據(jù)存儲在本地存儲中。我們的下一個操作可能是將初始狀態(tài)留空，并允許應用程序掛載。安裝應用程序后，我們可以向服務器發(fā)出一些 HTTP 請求以獲取數(shù)據(jù)，然后更新全局狀態(tài)：

但是，現(xiàn)在有一個奇怪的用戶體驗。應用程序?qū)⒓虞d并發(fā)送請求，但當用戶等待請求返回時，會看到“您可能應該登錄”。當請求返回時，假設有一個登錄的會話，該消息會迅速更改為“嗨{{ user.name }}，歡迎回來！”。這看起來會顯得奇怪。

為了解決這個問題，我們只需在請求發(fā)出時顯示加載元素：

記住，這是一個非常簡單的示例。在您的應用程序中，您可能有一個用于加載動畫的專用組件，并且可能有一個組件來代替此處的用戶消息。還可以選擇從 Vuex 操作發(fā)出該 HTTP 請求，這個概念仍然適用。

在加載應用承載之前請求數(shù)據(jù)

最后一個示例是發(fā)出類似于上一個的 HTTP 請求，但在應用程序加載之前，等待請求返回并更新存儲。

Vuex 存儲只是一個具有一些屬性和方法的對象，可以將其視為任何其他 JavaScript 對象。

將我們的存儲導入main.js文件（或任何應用程序的入口點）并在安裝應用程序之前調(diào)用HTTP 請求：

 
 
 
 

  
  
  
  
import Vue from "vue" 
  
  
  
  
import store from "./store" 
  
  
  
  
import App from "./App.vue" 
  
  
  
  
fetch('/user') 
  
  
  
  
  .then(r => r.json()) 
  
  
  
  
  .then((user) => { 
  
  
  
  
    store.commit('setUser', user) 
  
  
  
  
    new Vue({ 
  
  
  
  
      store, 
  
  
  
  
      render: (h) => h(App), 
  
  
  
  
    }).$mount("#app") 
  
  
  
  
  }) 
  
  
  
  
  .catch((error) => { 
  
  
  
  
    // Don't forget to handle this 
  
  
  
  
  }) 
 
 
 
 

在應用程序加載之前，將需要從 API 獲取的任何數(shù)據(jù)預加載到全局存儲中。這種方法可以避免前面提到的janky跳躍或管理某些加載邏輯的問題。
然而，

有一個重要的警告。當 HTTP 請求掛起時，不必擔心顯示加載微調(diào)器，與此同時，應用程序中沒有顯示任何內(nèi)容。如果應用程序是單頁應用程序，那么用戶可能會一直盯著空白頁面，直到請求返回。

因此，并沒有真正解決延遲問題，只是在等待數(shù)據(jù)時決定顯示什么樣的 UI 體驗。

結語

對于上述方法，并沒有說哪種比較好。實際上，可以根據(jù)要獲取的數(shù)據(jù)以及應用程序需要，使用這三種方法。

還需要提到的是，fetch請求不是使用 Vuex 變體直接提交到存儲。您可以同樣使用 Vuex 操作來實現(xiàn)fetch請求. 也還可以將這些相同的原則應用于任何其他狀態(tài)管理工具，例如 Vue.observable。

【譯稿，合作站點轉載請注明原文譯者和出處為.com】

本文名稱：預填充Vue.js全局存儲狀態(tài)的三種方法
本文網(wǎng)址：http://www.dlmjj.cn/article/cccdspj.html