VueJS: State

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Cây trạng thái đơn

Vuex sử dụng một cây state duy nhất - tức là, đối tượng đơn này chứa tất cả state mức ứng dụng của bạn và phục vụ như là "nguồn chuẩn duy nhất". Điều này cũng có nghĩa là bạn sẽ chỉ có một store cho mỗi ứng dụng. Một cây state duy nhất giúp dễ dàng xác định một phần state cụ thể và cho phép chúng ta dễ dàng chụp nhanh state ứng dụng hiện tại cho mục đích gỡ lỗi.

Cây state đơn không xung đột với mô đun - trong các chương sau, chúng ta sẽ thảo luận cách chia tách state và mutation của bạn thành các mô-đun phụ.

Lấy state của Vuex vào component của Vue

Vậy làm thế nào để chúng ta hiển thị state bên trong store trong các Vue component của chúng ta? Vì các store Vuex có phản ứng, cách đơn giản nhất để "truy xuất" state từ nó đơn giản là trả về một số state lưu trữ từ bên trong một thuộc tính được tính toán:

// ta tạo một component Counter
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

Bất cứ khi nào store.state.count thay đổi, nó sẽ làm cho thuộc tính được tính toán đánh giá lại và kích hoạt các bản cập nhật DOM liên quan.

Tuy nhiên, mô hình này làm cho component dựa vào singleton store global. Khi sử dụng hệ thống mô-đun, nó yêu cầu nhập store trong mỗi component sử dụng store state và cũng yêu cầu mocking khi thử nghiệm component.

Vuex cung cấp một cơ chế để "đưa vào" store tất cả các component con từ component gốc với tùy chọn store (được bật bởi Vue.use(Vuex)):

const app = new Vue({
  el: '#app',
  // cung cấp store sử dụng tùy chọn "store".
  // điều này sẽ đưa đối tượng store vào tất cả các component con.
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

Bằng cách cung cấp tùy chọn store cho đối tượng gốc, store sẽ được đưa vào tất cả các component con của thư mục gốc và sẽ có sẵn trên chúng như là this.$store. Hãy cập nhật thực thi Counter:

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

#Helper mapState

Khi một component cần sử dụng nhiều thuộc tính state của store hoặc getters, việc khai báo tất cả các thuộc tính được tính toán này có thể lặp đi lặp lại và đưa ra. Để giải quyết vấn đề này, chúng ta có thể sử dụng helper mapState để tạo ra các hàm getter được tính toán cho chúng ta, tiết kiệm cho chúng ta một số tổ hợp phím:

// trong các helper xây dựng đầy đủ được thể hiện dưới dạng Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // hàm mũi tên có thể làm cho mã lệnh trở nên ngắn gọn!
    count: state => state.count,

    // truyền chuỗi 'count' tương tự như `state => state.count`
    countAlias: 'count',

    // để truy cập state cục bộ với `this`, một hàm chuẩn phải được sử dụng
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

Chúng ta cũng có thể chuyển một mảng chuỗi tới mapState khi tên của thuộc tính được ánh xạ được lập bản đồ giống như tên cây con của state.

computed: mapState([
  // map this.count thành store.state.count
  'count'
])

#Toán tử lan truyền đối tượng

Lưu ý rằng mapState trả về một đối tượng. Làm cách nào để sử dụng kết hợp với các thuộc tính được tính toán cục bộ khác? Thông thường, chúng ta sẽ phải sử dụng một tiện ích để hợp nhất nhiều đối tượng thành một đối tượng để chúng ta có thể chuyển đối tượng cuối cùng đến computed. Tuy nhiên với toán tử lan truyền đối tượng (đó là một đề xuất ECMAScript giai đoạn-4), chúng ta có thể đơn giản hóa cú pháp:

computed: {
  localComputed () { /* ... */ },
  // trộn vào đối tượng outer bằng toán tử làn truyền đối tượng
  ...mapState({
    // ...
  })
}

#Component vẫn có thể có state cục bộ

Sử dụng Vuex không có nghĩa là bạn nên đặt tất cả các state trong Vuex. Mặc dù đưa thêm state vào Vuex làm cho các state mutation của bạn rõ ràng hơn và có thể gỡ lỗi, đôi khi nó cũng có thể làm cho đoạn mã chi tiết và gián đoạn hơn. Nếu một phần của state nghiêm chỉnh thuộc về một component duy nhất, nó có thể là tốt để lại nó như là state cục bộ. Bạn nên cân nhắc sự cân bằng và đưa ra quyết định phù hợp với nhu cầu phát triển của ứng dụng của bạn.

» Tiếp: Getter
« Trước: Cài đặt Vuex
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!