VueJS dữ liệu thành phần không đồng bộ và hứa hẹn

Question

Thử VueJS 2.0 RC và sử dụng API tìm nạp để tải một số dữ liệu cho một số thành phần. Dưới đây là một ví dụ giả:

const Component = { 
    template: '#comp', 
    name: "some-component", 
    data: function() { 
    return { 
     basic: data.subset, 
     records: function() { 
     return fetch('/datasource/api', { 
      method: 'get' 
     }).then(function (response) { 
      return response.json(); 
     }).then(function (response) { 
      if (response.status == "success") { 
      return response.payload; 
      } else { 
      console.error(response.message); 
      } 
     }).catch(function (err) { 
      console.error(err); 
     }); 
     } 
    } 
    } 
}; 

Đối tượng data là một trạng thái ứng dụng toàn cầu, được xác định trước khi khởi tạo của ứng dụng, và chỉ có một tập hợp con của nó là cần thiết trong thành phần, do đó phần đó. Tập dữ liệu chính của thành phần xuất phát từ một điểm cuối khác mà tôi đang cố gắng gọi. Tuy nhiên, data sở hữu hy vọng một đối tượng, và nó nhận được lại một Promise nó có thể không thực sự sử dụng trong bối cảnh của một vòng lặp trong bản mẫu để render vv (ví dụ v-for="record in records")

Tôi đi về việc này một cách sai lầm? Cách tiếp cận để lấy dữ liệu records thuộc tính để cập nhật khi nó được tìm nạp đầy đủ là gì? Có cách nào để buộc mã dừng lại cho đến khi lời hứa giải quyết (có hiệu quả làm cho nó đồng bộ) không? Các thành phần là vô dụng mà không có dữ liệu nào, vì vậy có một thời gian chờ đợi trước khi nó có thể được sử dụng bất kể.

đúng cách để điền không đồng bộ dữ liệu của trường thành phần mà không sử dụng plugin như vue-async hoặc vue-resource?

(Tôi biết tôi có thể sử dụng XHR/phương pháp jQuery của phi hứa ajax gọi để làm điều này, nhưng tôi muốn học cách để làm điều đó bằng lấy)

---

Cập nhật: tôi đã cố gắng xác định một tạo móc và phương thức tải dữ liệu, like this nhưng không có súc sắc - trong thử nghiệm của riêng tôi, thuộc tính bản ghi không thể cập nhật sau khi được tải. Nó không thay đổi, mặc dù dữ liệu được tải thành công (thành công đăng nhập vào bảng điều khiển).

Có thể liên quan đến tôi bằng cách sử dụng bộ định tuyến-vue và thành phần mà tôi đang xử lý khi kích hoạt khi một liên kết được nhấp vào, trái ngược với thành phần Vue thông thường. Điều tra thêm ...

---

Cập nhật # 2: Nếu tôi tiếp tục điều tra các cách tiếp cận jsfiddle trên và đăng nhập this.records và response.payload ra cửa sổ Console, nó cho thấy các hồ sơ đối tượng được dân cư. Tuy nhiên, điều này dường như không kích hoạt sự thay đổi trong khuôn mẫu hoặc chính thành phần đó - kiểm tra bằng các công cụ dev của Vue, thuộc tính bản ghi vẫn là một mảng trống. Thật vậy, nếu tôi thêm một phương pháp logstuff và một nút vào mẫu mà gọi nó, và sau đó có phương pháp này log this.records vào giao diện điều khiển, nó có thể ghi một người quan sát với một mảng trống:

Bây giờ tôi m tự hỏi tại sao thuộc tính dữ liệu của một thành phần sẽ không được cập nhật ngay cả sau khi nó được đặt rõ ràng thành giá trị khác. Đã cố gắng thiết lập trình theo dõi cho $route kích hoạt phương thức reload, nhưng không có súc sắc - mỗi lần tải tiếp theo của tuyến đó thực sự cấp lại tìm nạp và nhật ký bảng điều khiển this.records như được điền (từ trong tìm nạp), nhưng "thực" this.records vẫn là một mảng trống.

Answer 1

Giải pháp là cách tiếp cận jsfiddle, với một bước ngoặt.Phần này:

reload: function() { 
     fetch('/data/api', { 
     method: 'get' 
     }).then(function (response) { 
     return response.json(); 
     }).then(function (response) { 
     if (response.status == "success") { 
      this.records = response.payload; 
     } else { 
      console.error(response.message); 
     } 
     }).catch(function (err) { 
     console.error(err); 
     }); 
    } 

cần một người .bind(this) ở phần đó đặt giá trị this.records sau khi lấy, như vậy:

reload: function() { 
     fetch('/data/api', { 
     method: 'get' 
     }).then(function (response) { 
     return response.json(); 
     }).then(function (response) { 
     if (response.status == "success") { 
      this.records = response.payload; 
     } else { 
      console.error(response.message); 
     } 
     }.bind(this)).catch(function (err) { 
     console.error(err); 
     }); 
    } 

This post là những gì làm cho nó nhấp cho tôi.

Bài học kinh nghiệm: trong JS hiện đại, luôn ghi nhớ phạm vi.