[[400585]]

Vuex 是 Vue.js 生態(tài)系統(tǒng)中必不可少的工具。但是新接觸 Vuex 的開(kāi)發(fā)人員可能會(huì)被諸如“狀態(tài)管理模式”這樣的術(shù)語(yǔ)所排斥，并且對(duì)他們實(shí)際需要Vuex的目的感到困惑。

本文算是 Vuex的入門，當(dāng)然也會(huì) Vuex 的高級(jí)概念，并向大家展示如何在應(yīng)用程序中使用 Vuex。

Vuex 解決的問(wèn)題

要理解Vuex，首先要理解它要解決的問(wèn)題。

假設(shè)我們開(kāi)發(fā)了一個(gè)多用戶聊天應(yīng)用。界面有用戶列表、私人聊天窗口、帶有聊天記錄的收件箱和通知欄，通知用戶當(dāng)前未查看的其他用戶的未讀消息。

數(shù)以百萬(wàn)計(jì)的用戶每天通過(guò)我們的應(yīng)用與數(shù)以百萬(wàn)計(jì)的其他用戶聊天。然而，有人抱怨一個(gè)惱人的問(wèn)題:通知欄偶爾會(huì)給出錯(cuò)誤的通知。用戶被通知有一條新的未讀消息，但當(dāng)他們查看時(shí)，它只是一條已經(jīng)被看過(guò)的消息。

該作者所描述的是幾年前 Facebook 開(kāi)發(fā)人員在其聊天系統(tǒng)中遇到的真實(shí)情況。解決這一問(wèn)題的過(guò)程中 開(kāi)發(fā)人員創(chuàng)建名為 **"Flux"**的應(yīng)用程序體系結(jié)構(gòu)。Flux 構(gòu)成了Vuex，Redux 和其它類似庫(kù)的基礎(chǔ)。

Flux

Facebook開(kāi)發(fā)者為“僵尸通知”這個(gè)問(wèn)題，苦苦掙扎了一段時(shí)間。他們最終意識(shí)到，它的持久性不僅僅是一個(gè)簡(jiǎn)單的缺陷——它指出了應(yīng)用程序架構(gòu)中的一些潛在缺陷。

抽象中最容易理解該缺陷：當(dāng)應(yīng)用程序中有多個(gè)共享數(shù)據(jù)的組件時(shí)，它們互連的復(fù)雜性將增加到無(wú)法預(yù)測(cè)或理解數(shù)據(jù)狀態(tài)的地步。因此，該應(yīng)用程序無(wú)法擴(kuò)展或維護(hù)。

Flux 是一個(gè)模式，不是一個(gè)庫(kù)。我們不能去Github下載 Flux。它是一種類似MVC的設(shè)計(jì)模式。像Vuex和Redux這樣的庫(kù)實(shí)現(xiàn)Flux模式的方式與其他框架實(shí)現(xiàn)MVC模式的方式相同。

事實(shí)上，Vuex并沒(méi)有實(shí)現(xiàn)Flux的全部，只是一個(gè)子集。不過(guò)現(xiàn)在不要擔(dān)心這個(gè)問(wèn)題，我們關(guān)注于理解它所遵循的關(guān)鍵原則。

原則1：?jiǎn)我粊?lái)源

組件可能具有僅需要了解的本地?cái)?shù)據(jù)。例如，滾動(dòng)條在用戶列表組件中的位置可能與其他組件無(wú)關(guān)。

但是，要在組件之間共享的任何數(shù)據(jù)(即應(yīng)用程序數(shù)據(jù))都必須保存在一個(gè)單獨(dú)的位置，與使用它的組件分開(kāi)。

這個(gè)單一位置稱為 "store"。組件必須從該位置讀取應(yīng)用程序數(shù)據(jù)，并且不能保留其自己的副本以防止沖突或分歧。

import { createStore } from "vuex"; 
 
// Instantiate our Vuex store 
const store = createStore({ 
 
  // "State" 組件的應(yīng)用程序數(shù)據(jù) 
   
  state () { 
    return { 
      myValue: 0 
    }; 
  } 
}); 
 
// 組件從其計(jì)算的屬性訪問(wèn) state  
const MyComponent = {    
  template: "<div>{{ myValue }}</div>", 
  computed: { 
    myValue () { 
      return store.state.myValue; 
    }    
  }  
}; 

原則2：數(shù)據(jù)是只讀的

組件可以從store中自由讀取數(shù)據(jù)。但是不能更改 store 中的數(shù)據(jù)，至少不能直接更改。

取而代之的是，它們必須告知 store 要更改數(shù)據(jù)的意圖，store由負(fù)責(zé)通過(guò)一組定義的功能(稱為mutation)進(jìn)行更改。

為什么采用這種方法?如果我們集中數(shù)據(jù)更改邏輯，那么在狀態(tài)不一致的情況下，我們只需要在同一地方排查就行了，不用到具體的每個(gè)文件中。我們將某些隨機(jī)組件(可能在第三方模塊中)以意外方式更改數(shù)據(jù)的可能性降至最低。

const store = createStore({  
  state() {  
    return { 
      myValue: 0 
    }; 
  },  
  mutations: {  
    increment (state, value) {  
      state.myValue += value; 
    } 
  }  
}); 
// 需要更新值嗎？ 
// 錯(cuò)誤的，不要直接更改 store 值 
store.myValue += 10; 
// 正確的，調(diào)用正確的 mutations。 
store.commit('increment', 10); 

原則3：mutation 是同步的

如果應(yīng)用程序在其體系結(jié)構(gòu)中實(shí)現(xiàn)了上述兩個(gè)原則，那么調(diào)試數(shù)據(jù)不一致就容易得多。可以記錄提交并觀察狀態(tài)如何變化(在使用Vue Devtools 時(shí)確實(shí)可以這樣做)。

但如果我們的mutation被異步調(diào)用，這種能力就會(huì)被削弱。我們知道提交的順序，但我們不知道組件提交它們的順序。

同步mutation可確保狀態(tài)不取決于不可預(yù)測(cè)事件的順序和時(shí)間。

太酷了，那么 Vuex 到底是什么?

有了所有這些背景知識(shí)，我們終于可以解決這個(gè)問(wèn)題-Vuex 是一個(gè)庫(kù)，可幫助我們?cè)赩ue應(yīng)用程序中實(shí)現(xiàn)Flux架構(gòu)。通過(guò)執(zhí)行上述原則，即使在多個(gè)組件之間共享數(shù)據(jù)時(shí)，Vuex 仍可將我們的應(yīng)用程序數(shù)據(jù)保持在透明且可預(yù)測(cè)的狀態(tài)。

現(xiàn)在，我們已經(jīng)對(duì)Vuex有了一個(gè)高級(jí)的了解，我們看看如何在實(shí)際項(xiàng)目創(chuàng)建基于Vuex的應(yīng)用程序。

做一個(gè)使用 Vuex to-do-list

為了演示Vuex的用法，我們?cè)O(shè)置一個(gè)簡(jiǎn)單的待辦應(yīng)用程序。大家可以在此處訪問(wèn)代碼的有效示例。

示例地址：https://codesandbox.io/s/happy-williams-rdni7

如果大家自己的電腦嘗試一波，那么可以使用下面的命令：

vue create vuex-example 

安裝 Vuex

cd vuex-example 
npm i -S vuex@4 
npm run serve 

創(chuàng)建一個(gè) Vuex store

現(xiàn)在，創(chuàng)建 Vuex store，在項(xiàng)目中創(chuàng)建 src/store/index.js：

mkdir src/store 
touch src/store/index.js 

打開(kāi)文件并導(dǎo)入createStore方法。此方法用于定義store及其特性。現(xiàn)在，我們導(dǎo)出該store ，以便在Vue應(yīng)用中能訪問(wèn)它。

// src/store/index.js 
 
import { createStore } from "vuex"; 
 
export default createStore({}); 

將 store 添加到 Vue 實(shí)例

為了可以從任何組件中訪問(wèn) Vuex store，我們需要在主文件中導(dǎo)入 store 模塊，并將store作為插件安裝在主Vue實(shí)例上

// src/main.js 
 
import { createApp } from "vue"; 
import App from "@/App"; 
import store from "@/store"; 
 
const app = createApp(App); 
 
app.use(store); 
 
app.mount("#app"); 

創(chuàng)建一個(gè)簡(jiǎn)單的應(yīng)用程序

如上所述，Vuex 的重點(diǎn)是通常在大型應(yīng)用程序中創(chuàng)建可擴(kuò)展的全局狀態(tài)。但是，我們可以在一個(gè)簡(jiǎn)單的待辦應(yīng)用程序中演示其功能。

完成后效果如下所示：

現(xiàn)在，刪除 HelloWorld 文件：

rm src/components/HelloWorld.vue 

TodoNew.vue

現(xiàn)在，添加一個(gè)新組件 TodoNew，它負(fù)責(zé)創(chuàng)建新的待辦事項(xiàng)。

touch src/components/TodoNew.vue 

打開(kāi) TodoNew.vue 并輸入以下內(nèi)容：

// src/components/TodoNew.vue 
 
<template> 
  <form @submit.prevent="addTodo"> 
    <input 
      type="text" 
      placeholder="Enter a new task" 
      v-model="task" 
    /> 
  </form> 
</template> 

現(xiàn)在轉(zhuǎn)到組件定義，有兩個(gè)局部狀態(tài)屬性-task和給新待辦事項(xiàng)提供唯一標(biāo)識(shí)符的id。

// src/components/TodoNew.vue 
 
<template>...</template> 
<script> 
export default { 
  data() { 
    return { 
      task: "", 
      id: 0 
    }; 
  }, 
  methods: { 
    addTodo: function() { 
      // 
    } 
  } 
}; 
</script> 

定義 store 狀態(tài)

過(guò)會(huì)，我們會(huì)創(chuàng)建一個(gè)顯示待辦事項(xiàng)的組件。由于它和TodoNew組件都需要訪問(wèn)相同的數(shù)據(jù)，因此這是我們?cè)?Vuex 存儲(chǔ)中保存的全局state 的理想選擇。

現(xiàn)在，回到state并定義屬性狀態(tài)。這里使用 Vux4 提供的 createStore 函數(shù)，該函數(shù)返回一個(gè)對(duì)象。該對(duì)象具有一個(gè)屬性 todos，它是一個(gè)空數(shù)組。

// src/store/index.js 
import { createStore } from "vuex"; 
 
export default createStore({ 
  state () { 
    return { 
      todos: [] 
    } 
  } 
}); 

定義 mutation

從原則2可以知道，Vuex state 不能直接更改，需要定義mutator函數(shù)。

現(xiàn)在，我們向store添加一個(gè)mutation屬性，并添加一個(gè)函數(shù)屬性addTodo。所有mutator方法第一個(gè)參數(shù)。第二個(gè)可選參數(shù)是 store，第二個(gè)是傳遞的數(shù)據(jù)。

// src/store/index.js 
 
import { createStore } from "vuex"; 
 
export default createStore({ 
  state () { 
    return { 
      todos: [] 
    } 
  }, 
  mutations: { 
    addTodo (state, item) { 
      state.todos.unshift(item); 
    } 
  } 
}); 

使用 commit 調(diào)用 mutation

現(xiàn)在，可以在TodoNew組件中使用它，在 TodoNew組件定義一個(gè)addTodo方法。

要訪問(wèn)store ，我們可以使用全局屬性this.$store。使用commit方法創(chuàng)建一個(gè)新的mutation。需要傳遞了兩個(gè)參數(shù)-首先是mutation的名稱，其次是我們要傳遞的對(duì)象，是一個(gè)新的待辦事項(xiàng)(由id和task值組成)。

// src/components/TodoNew.vue 
methods: { 
  addTodo: function() { 
    const { id, task } = this; 
    this.$store.commit("addTodo", { id, task }); 
    this.id++; 
    this.task = ""; 
  } 
} 

回顧

到目前為止：

1. 用戶將待辦事項(xiàng)通過(guò)輸入框輸入，并綁定到 task 變量。
2. 提交表單后，將調(diào)用addTodo方法
3. 創(chuàng)建一個(gè)待辦事項(xiàng)對(duì)象并將其“提交”到store中。

// src/components/TodoNew.vue 
<template> 
  <form @submit.prevent="addTodo"> 
    <input 
      type="text" 
      placeholder="Enter a new task" 
      v-model="task" 
    /> 
  </form> 
</template> 
<script> 
export default { 
  data() { 
    return { 
      task: "", 
      id: 0 
    }; 
  }, 
  methods: { 
    addTodo: function() { 
      const { id, task } = this; 
      this.$store.commit("addTodo", { id, task }); 
      this.id++; 
      this.task = ""; 
    } 
  } 
}; 
</script> 

讀取 store 數(shù)據(jù)

現(xiàn)在，我們已經(jīng)創(chuàng)建了用于添加待辦事項(xiàng)的功能。接下來(lái)，就是把它們顯示出來(lái)。

創(chuàng)建一個(gè)新組件TodoList.vue 文件。

touch src/components/TodoList.vue 

內(nèi)容如下：

// src/components/TodoList.vue 
<template> 
<ul> 
  <li 
    v-for="todo in todos" 
    :key="todo.id" 
  > 
    {{ todo.description }} 
  </li> 
</ul> 
</template> 

todos是一個(gè)計(jì)算屬性，我們?cè)谄渲蟹祷豓uex store 的內(nèi)容。

// src/components/TodoList.vue 
 
<script> 
export default { 
  computed: { 
    todos() { 
      //  
    } 
  } 
}; 
</script> 

定義 getters

與直接訪問(wèn)store 內(nèi)容不同，getter是類似于存儲(chǔ)的計(jì)算屬性的函數(shù)。在將數(shù)據(jù)返回到應(yīng)用程序之前，這些工具非常適合過(guò)濾或轉(zhuǎn)換數(shù)據(jù)。

例如，下面有g(shù)etTodos，它返回未過(guò)濾的狀態(tài)。在許多情況下，可以使用filter或map來(lái)轉(zhuǎn)換此內(nèi)容。

todoCount返回todo數(shù)組的長(zhǎng)度。

通過(guò)確保組件愿意保留數(shù)據(jù)的本地副本，getter有助于實(shí)現(xiàn)原則1，即單一數(shù)據(jù)來(lái)源。

// src/store/index.js 
 
export default createStore({ 
  ... 
  getters: { 
    getTodos (state) { 
      return state.todos; 
    }, 
    todoCount (state) { 
      return state.todos.length; 
    } 
  } 
}) 

返回TodoList組件，我們通過(guò)返回this.$store.getters.getTodos來(lái)完成功能。

// src/components/TodoList.vue 
 
<script> 
export default { 
  computed: { 
    todos() { 
      return this.$store.getters.getTodos; 
    } 
  } 
}; 
</script> 

App.vue

要完成此應(yīng)用程序，現(xiàn)在要做的就是導(dǎo)入并在App.vue中聲明我們的組件。

// src/App.vue 
 
<template> 
  <div> 
    <h1>To-Do List</h1> 
    <div> 
      <TodoNew /> 
      <TodoList /> 
    </div> 
  </div> 
</template> 
<script> 
import TodoNew from "@/components/TodoNew.vue"; 
import TodoList from "@/components/TodoList.vue"; 
 
export default { 
  components: { 
    TodoNew, 
    TodoList 
  } 
}; 
</script> 

你真的需要Vuex嗎?

顯然，在大型應(yīng)用程序中，擁有全局狀態(tài)管理解決方案將有助于讓我們的應(yīng)用程序可預(yù)測(cè)和可維護(hù)。

但對(duì)于比較小的項(xiàng)目，有時(shí)候覺(jué)得使用 Vuex 太大材小用了，還這個(gè)還是大家跟著實(shí)際需求走比較合理。

Vuex的優(yōu)點(diǎn)：

• 易于管理全局狀態(tài)
• 強(qiáng)大的調(diào)試全局狀態(tài)

Vuex的缺點(diǎn)：

• 額外的項(xiàng)目依賴
• 繁瑣的模板

~ 完， 我是刷碗智，刷碗去咯，下期見(jiàn)!

作者：Anthony Gore 譯者：前端小智 來(lái)源：vuejsdevelopers

原文：https://vuejsdevelopers.com/2017/05/15/vue-js-what-is-vuex/