已完本玄幻小说排行榜,有声小说在线收听网

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

預(yù)填充Vue.js全局存儲狀態(tài)的三種方法

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

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

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

Vuex 的使用使得的管理全局數(shù)據(jù)存儲變得更加簡單，對于以下示例，假設(shè)有一個類似以下內(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)。然后在我們的應(yīng)用程序中，顯示用戶詳細信息：

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

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

設(shè)置初始狀態(tài)

預(yù)先填充全局存儲的最簡單方法是在創(chuàng)建存儲時設(shè)置初始狀態(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   
  
  
      }   
  
  
    }   
  
  
  })

顯然，這只有在您提前知道有關(guān)用戶的詳細信息時才可以。在構(gòu)建應(yīng)用程序時，我們可能不知道用戶的姓名，但還有另一種選擇。

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

當應(yīng)用加載時，您可以將用戶詳細信息從本地存儲初始狀態(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，只是不持久化）。

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

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

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

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

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

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

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

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

將我們的存儲導入main.js文件（或任何應(yīng)用程序的入口點）并在安裝應(yīng)用程序之前調(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   
  
  
    })

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

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

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

結(jié)語

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

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

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

文章名稱：預(yù)填充Vue.js全局存儲狀態(tài)的三種方法
地址分享：http://fisionsoft.com.cn/article/cccdspj.html

新聞中心

其他資訊