【51CTO.com快譯】當構建Vue.js應用程序并切程序達到一定的規模時，可能會有全局狀態管理的需求。方便的是，核心開發團隊提供Vuex，它是 Vue.js 應用程序實際的狀態管理庫。 

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

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

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 
    } 
  }, 
}) 

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

<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> 

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

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

設置初始狀態

預先填充全局存儲的最簡單方法是在創建存儲時設置初始狀態：

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 
    } 
  } 
}) 

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

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

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

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 
    } 
  } 
}) 

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

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

安裝應用程序時請求數據

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

<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> 

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

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

<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> 

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

在加載應用承載之前請求數據

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

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

將我們的存儲導入main.js文件（或任何應用程序的入口點）并在安裝應用程序之前調用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 獲取的任何數據預加載到全局存儲中。這種方法可以避免前面提到的janky跳躍或管理某些加載邏輯的問題。
然而，

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

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

結語

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

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

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