Vuex,Vue.js狀態管理器

Vuex是Vue.js的官方狀態管理庫。在本教程中,我將解釋其基本用法。

Vuex簡介

Vuex是Vue.js的官方狀態管理庫。

它的工作是在應用程序的各個組件之間共享數據。

開箱即用的Vue.js中的組件可以使用

  • 道具,將狀態從父級傳遞給子級組件
  • 大事記,從子級更改父組件的狀態,或將根組件用作事件總線

有時候事情變得比這些簡單的選項所允許的更為複雜。

在這種情況下,一個不錯的選擇是將狀態集中在一個存儲中。這就是Vuex所做的。

為什麼要使用Vuex

Vuex不是您可以在Vue中使用的唯一狀態管理選項(您可以使用Redux也是如此),但是它的主要優點是它是官方的,並且與Vue.js的集成才使它大放異彩。

使用React,您將不得不選擇眾多可用庫之一,因為該生態系統龐大且沒有實際標準。最近,Redux是最受歡迎的選擇,MobX在人氣方面緊隨其後。有了Vue,我想說的就是,除了Vuex之外,您無需四處尋找其他東西,尤其是在開始學習時。

Vuex從React生態系統中藉鑑了許多想法,因為這是Redux流行的Flux模式。

如果您已經了解Flux或Redux,那麼Vuex將非常熟悉。如果您沒有,那就沒問題-我將徹底解釋每個概念。

Vue應用程序中的組件可以具有自己的狀態。例如,一個輸入框將在本地存儲輸入到其中的數據。這非常好,即使使用Vuex,組件也可以具有局部狀態。

您知道開始進行大量工作來傳遞狀態時需要Vuex之類的東西。

在這種情況下,Vuex為狀態提供了一個中央存儲庫,您可以通過請求狀態來對狀態進行更改。

依賴於狀態的特定部分的每個組件都將使用商店中的getter來訪問它,以確保在狀態發生變化時立即對其進行更新。

使用Vuex會給應用程序帶來一些複雜性,因為需要以某種特定的方式進行設置才能正常工作,但是如果這有助於解決無組織的道具傳遞和事件系統(如果過於復雜則可能會變成意大利麵條),那麼一個不錯的選擇。

開始吧

在這個例子中,我從一個Vue CLI應用。也可以通過直接將Vuex加載到腳本標籤中來使用Vuex,但是由於Vuex更適合大型應用程序,因此您更有可能在結構化的應用程序上使用它,例如可以通過Vue快速啟動的應用程序。 CLI。

我使用的示例將放在CodeSandbox中,它是一項很棒的服務,具有準備就緒的Vue CLI示例https://codesandbox.io/s/vue。我建議使用它來玩耍。

CodeSandbox

到達之後,請按一下添加依賴按鈕,輸入“ vuex”,然後單擊它。

現在,Vuex將列在項目依賴項中。

要在本地安裝Vuex,您可以運行npm install vuex或者yarn add vuex在項目文件夾中。

創建Vuex商店

現在,我們準備創建Vuex商店。

該文件可以放在任何地方。一般建議將其放入src/store/store.js文件,所以我們會這樣做。

在此文件中,我們初始化Vuex並告訴Vue使用它:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({})

Vuex store

我們導出Vuex商店對象,該對像是使用Vuex.Store()API。

商店的用例

現在我們已經有了一個框架,讓我們提出一個關於Vuex的好用例的想法,以便我介紹它的概念。

例如,我有2個同級組件,一個帶有一個輸入字段,另一個打印該輸入字段的內容。

當輸入字段更改時,我還要更改第二個組件中的內容。很簡單,但這將為我們完成工作。

介紹我們需要的新組件

我刪除HelloWorld組件,並添加一個Form組件和一個Display組件。

<template>
	<div>
		<label for="flavor">Favorite ice cream flavor?</label>
		<input name="flavor">
	</div>
</template>
<template>
	<div>
		<p>You chose ???</p>
	</div>
</template>

將這些組件添加到應用程序

我們將它們添加到App.vue代碼而不是HelloWorld組件中:

<template>
  <div id="app">
    <Form/>
    <Display/>
  </div>
</template>

<script> import Form from ‘./components/Form’ import Display from ‘./components/Display’

export default { name: ‘App’, components: { Form, Display } } </script>

將狀態添加到商店

因此,有了這個,我們回到store.js文件,並向商店添加一個屬性,名為state,這是一個對象,其中包含flavor財產。最初是一個空字符串。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ } })

當用戶在輸入字段中鍵入內容時,我們將對其進行更新。

添加一個突變

該狀態只能通過使用來操縱變異。我們設置了一個突變,該突變將在Form組件內部用於通知商店狀態應該更改。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ }, mutations: { change(state, flavor) { state.flavor = flavor } } })

添加吸氣劑以引用狀態屬性

設置好之後,我們需要添加一種查看狀態的方法。我們使用吸氣劑。我們為flavor財產:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ }, mutations: { change(state, flavor) { state.flavor = flavor } }, getters: { flavor: state => state.flavor } })

注意如何getters是一個對象。flavor是此對象的屬性,該對象接受狀態作為參數,並返回flavor國家的財產。

將Vuex商店添加到應用程序

現在該商店已準備就緒,可以使用了。我們回到應用程序代碼,在main.js文件中,我們需要導入狀態並將其在我們的Vue應用程序中可用。

我們增加

import { store } from './store/store'

並將其添加到Vue應用程序中:

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

一旦添加,由於這是主要的Vue組件,因此store每個Vue組件內的變量將指向Vuex存儲。

使用提交更新用戶操作的狀態

讓我們在用戶鍵入內容時更新狀態。

我們通過使用store.commit()API。

但是首先,讓我們創建一個在輸入內容更改時調用的方法。我們用@input而不是@change因為後者僅在焦點從輸入框移開時才觸發,而@input在每次按鍵時都會被調用。

<template>
  <div>
    <label for="flavor">Favorite ice cream flavor?</label>
    <input @input="changed" name="flavor">
  </div>
</template>

<script> export default { methods: { changed: function(event) { alert(event.target.value) } } } </script>

現在我們有了風味的價值,我們使用Vuex API:

<script>
export default {
  methods: {
    changed: function(event) {
      this.$store.commit('change', event.target.value)
    }
  }
}
</script>

看看我們如何使用this.$store?這要歸功於在主要Vue組件初始化中包含了存儲對象。

commit()方法接受一個突變名稱(我們使用了change(在Vuex存儲中)和有效負載,這些負載將作為回調函數的第二個參數傳遞給該突變。

使用吸氣劑打印狀態值

現在,我們需要使用以下方法在“顯示”模板中引用該值的獲取方法:$store.getters.flavorthis可以刪除,因為我們在模板中,並且this是隱式的。

<template>
  <div>
    <p>You chose {{ $store.getters.flavor }}</p>
  </div>
</template>

包起來

就是對Vuex的介紹!

完整的有效源代碼可在以下位置獲得:https://codesandbox.io/s/zq7k7nkzkm

這個難題中仍然缺少許多概念:

  • 行動
  • 模組
  • 幫手
  • 外掛程式

但是您有基礎知識可以在官方文檔中閱讀。

祝您編碼愉快!

免費下載我的Vue手冊


更多vue教程: