Vuex, Giám đốc Nhà nước Vue.js

Vuex là thư viện quản lý nhà nước chính thức cho Vue.js. Trong hướng dẫn này, tôi sẽ giải thích cách sử dụng cơ bản của nó.

Giới thiệu về Vuex

Vuex là thư viện quản lý nhà nước chính thức cho Vue.js.

Công việc của nó là chia sẻ dữ liệu trên các thành phần của ứng dụng của bạn.

Các thành phần trong Vue.js ra khỏi hộp có thể giao tiếp bằng cách sử dụng

  • đạo cụ, để chuyển trạng thái xuống các thành phần con từ cha mẹ
  • sự kiện, để thay đổi trạng thái của thành phần mẹ từ thành phần con hoặc sử dụng thành phần gốc làm bus sự kiện

Đôi khi mọi thứ trở nên phức tạp hơn những gì các tùy chọn đơn giản này cho phép.

Trong trường hợp này, một lựa chọn tốt là tập trung trạng thái vào một cửa hàng duy nhất. Đây là những gì Vuex làm.

Tại sao bạn nên sử dụng Vuex

Vuex không phải là tùy chọn quản lý trạng thái duy nhất mà bạn có thể sử dụng trong Vue (bạn có thể sử dụngReduxquá), nhưng ưu điểm chính của nó là nó chính thức và việc tích hợp với Vue.js là điều khiến nó trở nên tỏa sáng.

Với React, bạn gặp khó khăn khi phải chọn một trong nhiều thư viện có sẵn, vì hệ sinh thái rất lớn và không có tiêu chuẩn de-facto. Gần đây Redux là lựa chọn phổ biến nhất, với MobX theo sau về mức độ phổ biến. Với Vue, tôi muốn nói rằng bạn sẽ không cần phải tìm kiếm bất cứ thứ gì khác ngoài Vuex, đặc biệt là khi bắt đầu.

Vuex đã vay mượn nhiều ý tưởng của mình từ hệ sinh thái React, vì đây là mẫu Flux được Redux phổ biến.

Nếu bạn đã biết Flux hoặc Redux rồi thì Vuex sẽ rất quen thuộc. Nếu bạn không, không vấn đề gì - tôi sẽ giải thích mọi khái niệm từ đầu.

Các thành phần trong ứng dụng Vue có thể có trạng thái riêng của chúng. Ví dụ, một hộp nhập liệu sẽ lưu trữ cục bộ dữ liệu được nhập vào nó. Điều này hoàn toàn ổn và các thành phần có thể có trạng thái cục bộ ngay cả khi sử dụng Vuex.

Bạn biết rằng bạn cần một cái gì đó như Vuex khi bạn bắt đầu làm nhiều việc để vượt qua một trạng thái xung quanh.

Trong trường hợp này, Vuex cung cấp một kho lưu trữ trung tâm cho trạng thái và bạn thay đổi trạng thái bằng cách yêu cầu cửa hàng làm điều đó.

Mọi thành phần phụ thuộc vào một phần cụ thể của trạng thái sẽ truy cập nó bằng cách sử dụng getter trên cửa hàng, điều này đảm bảo rằng nó được cập nhật ngay khi thứ đó thay đổi.

Việc sử dụng Vuex sẽ tạo ra một số phức tạp cho ứng dụng, vì mọi thứ cần được thiết lập theo một cách nhất định để hoạt động chính xác, nhưng nếu điều này giúp giải quyết việc truyền đạo cụ không được tổ chức và hệ thống sự kiện có thể phát triển thành một mớ mì Ý nếu quá phức tạp một lựa chọn tốt.

Hãy bắt đầu

Trong ví dụ này, tôi bắt đầu từ mộtVue CLIứng dụng. Vuex cũng có thể được sử dụng bằng cách tải trực tiếp nó vào thẻ script, nhưng vì Vuex phù hợp hơn với các ứng dụng lớn hơn, nên nhiều khả năng bạn sẽ sử dụng nó trên một ứng dụng có cấu trúc hơn, chẳng hạn như những ứng dụng bạn có thể khởi động nhanh chóng với Vue CLI.

Các ví dụ tôi sử dụng sẽ được đặt CodeSandbox, đây là một dịch vụ tuyệt vời có sẵn mẫu Vue CLIhttps://codesandbox.io/s/vue. Tôi khuyên bạn nên sử dụng nó để chơi xung quanh.

CodeSandbox

Khi bạn ở đó, hãy nhấp vàoThêm phụ thuộc, nhập “vuex” và nhấp vào nó.

Bây giờ Vuex sẽ được liệt kê trong phần phụ thuộc của dự án.

Để cài đặt Vuex cục bộ, bạn có thể chạynpm install vuexhoặc làyarn add vuexbên trong thư mục dự án.

Tạo cửa hàng Vuex

Bây giờ chúng tôi đã sẵn sàng để tạo cửa hàng Vuex của mình.

Tập tin này có thể được đặt ở bất cứ đâu. Nó thường được đề xuất để đặt nó trongsrc/store/store.jstệp, vì vậy chúng tôi sẽ làm điều đó.

Trong tệp này, chúng tôi khởi tạo Vuex và chúng tôi yêu cầu Vue sử dụng nó:

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

Vue.use(Vuex)

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

Vuex store

Chúng tôi xuất một đối tượng cửa hàng Vuex, mà chúng tôi tạo bằng cách sử dụngVuex.Store()API.

Một trường hợp sử dụng cho cửa hàng

Bây giờ chúng ta đã có một khung, hãy lên ý tưởng cho một trường hợp sử dụng tốt cho Vuex, vì vậy tôi có thể giới thiệu các khái niệm của nó.

Ví dụ: tôi có 2 thành phần anh em, một thành phần có trường đầu vào và một thành phần in nội dung trường đầu vào đó.

Khi trường đầu vào được thay đổi, tôi cũng muốn thay đổi nội dung trong thành phần thứ hai đó. Rất đơn giản nhưng điều này sẽ làm công việc cho chúng tôi.

Giới thiệu các thành phần mới mà chúng tôi cần

Tôi xóa thành phần HelloWorld và thêm thành phần Biểu mẫu và thành phần Hiển thị.

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

Thêm các thành phần đó vào ứng dụng

Chúng tôi thêm chúng vào mã App.vue thay vì thành phần 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>

Thêm trạng thái vào cửa hàng

Vì vậy, với điều này tại chỗ, chúng tôi quay lại tệp store.js và chúng tôi thêm một thuộc tính vào cửa hàng được gọi làstate, là một đối tượng, chứaflavorbất động sản. Đó là một chuỗi rỗng ban đầu.

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

Vue.use(Vuex)

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

Chúng tôi sẽ cập nhật nó khi người dùng nhập vào trường đầu vào.

Thêm một đột biến

Trạng thái không thể bị thao túng ngoại trừ bằng cách sử dụngđột biến. Chúng tôi thiết lập một đột biến sẽ được sử dụng bên trong thành phần Biểu mẫu để thông báo cho cửa hàng rằng trạng thái sẽ thay đổi.

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

Thêm một getter để tham chiếu một thuộc tính tiểu bang

Với bộ đó, chúng ta cần thêm một cách nhìn nhận trạng thái. Chúng tôi làm như vậy bằng cách sử dụnggetters. Chúng tôi thiết lập một getter choflavorbất động sản:

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

Nhận thấy như thế nàogetterslà một đối tượng.flavorlà một thuộc tính của đối tượng này, nó chấp nhận trạng thái làm tham số và trả vềflavortài sản của nhà nước.

Thêm cửa hàng Vuex vào ứng dụng

Bây giờ cửa hàng đã sẵn sàng để sử dụng. Chúng tôi quay lại mã ứng dụng của mình và trong tệp main.js, chúng tôi cần nhập trạng thái và làm cho nó có sẵn trong ứng dụng Vue của chúng tôi.

Chúng tôi thêm

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

và chúng tôi thêm nó vào ứng dụng Vue:

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

Khi chúng tôi thêm cái này, vì đây là thành phần Vue chính,storebiến bên trong mọi thành phần Vue sẽ trỏ đến cửa hàng Vuex.

Cập nhật trạng thái trên một hành động của người dùng bằng cam kết

Hãy cập nhật trạng thái khi người dùng nhập nội dung nào đó.

Chúng tôi làm như vậy bằng cách sử dụngstore.commit()API.

Nhưng trước tiên, hãy tạo một phương thức được gọi khi nội dung đầu vào thay đổi. Chúng tôi sử dụng@inputhơn là@changebởi vì cái sau chỉ được kích hoạt khi tiêu điểm được di chuyển khỏi hộp nhập liệu, trong khi@inputđược gọi trên mỗi lần nhấn phím.

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

Bây giờ chúng ta có giá trị của hương vị, chúng ta sử dụng Vuex API:

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

xem cách chúng tôi tham khảo cửa hàng bằng cách sử dụngthis.$store? Điều này là nhờ vào việc đưa đối tượng store vào khởi tạo thành phần Vue chính.

Cáccommit()phương thức chấp nhận một tên đột biến (chúng tôi đã sử dụngchangetrong cửa hàng Vuex) và một trọng tải, sẽ được chuyển cho đột biến dưới dạng tham số thứ hai của hàm gọi lại của nó.

Sử dụng getter để in giá trị trạng thái

Bây giờ, chúng ta cần tham chiếu đến getter của giá trị này trong mẫu Hiển thị, bằng cách sử dụng$store.getters.flavor.thiscó thể bị xóa vì chúng tôi đang ở trong mẫu vàthislà ẩn ý.

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

Kết thúc

Đó là phần giới thiệu về Vuex!

Mã nguồn đầy đủ, hoạt động có sẵn tạihttps://codesandbox.io/s/zq7k7nkzkm

Vẫn còn thiếu nhiều khái niệm trong câu đố này:

  • hành động
  • mô-đun
  • người trợ giúp
  • bổ sung

nhưng bạn có những điều cơ bản để đọc và đọc về chúng trong các tài liệu chính thức.

Chúc bạn viết mã vui vẻ!

Tải xuống miễn phí của tôiSổ tay Vue


Các hướng dẫn vue khác: