Vuex getter không cập nhật

Question

Tôi có getter dưới đây:

withEarmarks: state => { 
    var count = 0; 
    for (let l of state.laptops) { 
     if (l.earmarks.length > 0) { 
      count++; 
     } 
    } 
    return count; 
} 

Và trong một thành phần, tài sản tính này có nguồn gốc từ getter rằng:

withEarmarks() { return this.$store.getters.withEarmarks; }, 

Giá trị trả lại là đúng, cho đến khi tôi thay đổi một phần tử bên trong mảng máy tính xách tay và sau đó trình thu thập không cập nhật.

Answer 1

Trong trường hợp của bạn state.laptops.earmarks là một mảng và bạn đang thao tác nó theo chỉ mục mảng state.laptops[index]. Vue không thể phản ứng với các đột biến trên các mảng trạng thái (theo chỉ số). Các tài liệu cung cấp 2 cách giải quyết cho việc này:

// 1. use purpose built vue method: 
Vue.set(state.laptops, index, laptop) 

// 2. splice the value in at an index: 
state.laptops.splice(index, 1, laptop) 

Mặc dù nó được ghi chép lại, tôi đang nghĩ đến một neon khổng lồ phát sáng dấu hiệu trên trang đó nói rằng "Bạn sẽ lãng phí giờ năng suất nếu bạn không biết điều này" sẽ là một bổ sung tốt đẹp.

Bạn có thể đọc thêm về điều này "báo trước" ở đây: https://vuejs.org/v2/guide/list.html#Caveats