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

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

Vuex 的使用使得的管理全局?jǐn)?shù)據(jù)存儲(chǔ)變得更加簡(jiǎn)單，對(duì)于以下示例，假設(shè)有一個(gè)類(lèi)似以下內(nèi)容的存儲(chǔ)：

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

存儲(chǔ)區(qū)的狀態(tài)從一個(gè)空user對(duì)象開(kāi)始， setUser可以更新?tīng)顟B(tài)。然后在我們的應(yīng)用程序中，顯示用戶(hù)詳細(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)用程序加載時(shí)，如果用戶(hù)已登錄，它會(huì)向用戶(hù)顯示“Hi，用戶(hù)名，welcome back!”的消息。否則，提示用戶(hù)需要登錄，這是一個(gè)很小的例子。 

但是，問(wèn)題來(lái)了，假如有幾個(gè)選項(xiàng)的時(shí)候，又該如何解決呢？

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

預(yù)先填充全局存儲(chǔ)的最簡(jiǎn)單方法是在創(chuàng)建存儲(chǔ)時(shí)設(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)用戶(hù)的詳細(xì)信息時(shí)才可以。在構(gòu)建應(yīng)用程序時(shí)，我們可能不知道用戶(hù)的姓名，但還有另一種選擇。 

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

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

注意，永遠(yuǎn)不要將非常敏感的數(shù)據(jù)（如身份驗(yàn)證令牌）存儲(chǔ)在本地存儲(chǔ)中，因?yàn)樗赡軙?huì)受到XSS的 攻擊。因此，上述的例子適用于用戶(hù)名，但不適用于身份驗(yàn)證令牌之類(lèi)的東西（它仍然可以是 Vuex，只是不持久化）。

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

現(xiàn)在假設(shè)，不將數(shù)據(jù)存儲(chǔ)在本地存儲(chǔ)中。我們的下一個(gè)操作可能是將初始狀態(tài)留空，并允許應(yīng)用程序掛載。安裝應(yīng)用程序后，我們可以向服務(wù)器發(fā)出一些 HTTP 請(qǐng)求以獲取數(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)在有一個(gè)奇怪的用戶(hù)體驗(yàn)。應(yīng)用程序?qū)⒓虞d并發(fā)送請(qǐng)求，但當(dāng)用戶(hù)等待請(qǐng)求返回時(shí)，會(huì)看到“您可能應(yīng)該登錄”。當(dāng)請(qǐng)求返回時(shí)，假設(shè)有一個(gè)登錄的會(huì)話(huà)，該消息會(huì)迅速更改為“嗨{{ user.name }}，歡迎回來(lái)！”。這看起來(lái)會(huì)顯得奇怪。

為了解決這個(gè)問(wèn)題，我們只需在請(qǐng)求發(fā)出時(shí)顯示加載元素：

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

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

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

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

Vuex 存儲(chǔ)只是一個(gè)具有一些屬性和方法的對(duì)象，可以將其視為任何其他 JavaScript 對(duì)象。 

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

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ù)加載到全局存儲(chǔ)中。這種方法可以避免前面提到的janky跳躍或管理某些加載邏輯的問(wèn)題。
然而，

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

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

結(jié)語(yǔ)

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

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

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