VueJS: Getter

Đôi khi, chúng ta có thể cần tính toán trạng thái có nguồn gốc dựa trên trạng thái store, ví dụ: lọc qua danh sách các mục và đếm chúng:

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

Nếu nhiều hơn một component cần sử dụng điều này, chúng ta phải sao chép hàm hoặc trích xuất nó thành một trình trợ giúp được chia sẻ và nhập nó ở nhiều nơi - cả hai đều không được lý tưởng.

Vuex cho phép chúng ta chỉ định "getter" trong trong store. Bạn có thể coi chúng như là các thuộc tính được tính toán cho các store. Giống như các thuộc tính được tính toán, kết quả của trình thu thập được lưu trữ dựa trên các dependency của nó và sẽ chỉ đánh giá lại khi một số dependency của nó đã thay đổi.

Getter sẽ nhận state là đối số thứ nhất của chúng:

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

#Truy cập kiểu thuộc tính

Các getter sẽ được hiển thị trên đối tượng store.getters và bạn truy cập các giá trị dưới dạng các thuộc tính:

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter cũng sẽ nhận các getter khác làm đối số thứ 2:

getters: {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

store.getters.doneTodosCount // -> 1

Bây giờ chúng ta có thể dễ dàng sử dụng nó bên trong bất kỳ component nào:

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

Lưu ý rằng getters được truy cập như các thuộc tính được lưu trữ như là một phần của hệ thống phản ứng của Vue.

Truy cập kiểu phương thức

Bạn cũng có thể chuyển đối số tới getters bằng cách trả về một hàm. Điều này đặc biệt hữu ích khi bạn muốn truy vấn một mảng trong store:

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

Lưu ý rằng getters được truy cập thông qua các phương thức sẽ chạy mỗi khi bạn gọi cho chúng và kết quả không được lưu trong bộ nhớ cache.

#Helper mapGetters

Trình trợ giúp mapGetters chỉ đơn giản là ánh xạ các lưu trữ vào các thuộc tính được tính toán cục bộ:

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    // trộn getters vào computed với toán tử lan truyền đối tượng
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

Nếu bạn muốn ánh xạ một getter đến một tên khác, hãy sử dụng một đối tượng:

...mapGetters({
  // map `this.doneCount` thành `this.$store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})