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

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

Vuex 的使用使得的管理全局?jǐn)?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)用程序中，顯示用戶詳細(xì)信息：

<template> 
  <div> 
    <p v-if="user">Hi {{ user.name }}, welcome back!</p> 
    <p v-else>You should probably log in.</p> 
  </div> 
</template> 
 
<script> 
export default { 
  computed { 
    user() { 
      return this.$store.state.user 
    } 
  } 
} 
</script> 

因此，當(dā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)用戶的詳細(xì)信息時才可以。在構(gòu)建應(yīng)用程序時，我們可能不知道用戶的姓名，但還有另一種選擇。 

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

當(dāng)應(yīng)用加載時，您可以將用戶詳細(xì)信息從本地存儲初始狀態(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ù)不需要非常嚴(yán)格的安全限制，那么這樣做是可以實現(xiàn)。我建議使用vuex-persistedstate庫來幫助實現(xiàn)自動化。 

注意，永遠(yuǎ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)：

<template> 
  <div> 
    <p v-if="user">Hi {{ user.name }}, welcome back!</p> 
    <p v-else>You should probably log in.</p> 
  </div> 
</template> 
<script> 
export default { 
  computed { 
    user() { 
      return this.$store.state.user 
    } 
  }, 
  async mounted() { 
    const user = await getUser() // Assume getUser returns a user object with a name property 
    this.$store.commit('setUser', user) 
  } 
} 
</script> 

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

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

<template> 
  <div> 
    <p v-if="loading">Loading...</p> 
    <p v-else-if="user">Hi {{ user.name }}, welcome back!</p> 
    <p v-else>You should probably log in.</p> 
  </div> 
</template> 
 
<script> 
export default { 
  data: () => ({ 
    loading: false 
  }), 
  computed { 
    user() { 
      return this.$store.state.user 
    } 
  }, 
  async mounted() { 
    this.loading = true 
    const user = await fetch('/user').then(r => r.json()) // Assume getUser returns a user object with a name property 
    this.$store.commit('setUser', user) 
    this.loading = false 
  } 
} 
</script> 

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

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

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

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

將我們的存儲導(dǎo)入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跳躍或管理某些加載邏輯的問題。
然而，

有一個重要的警告。當(dāng) HTTP 請求掛起時，不必?fù)?dān)心顯示加載微調(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。

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