Cách thích hợp để đồng bộ hóa các đạo cụ với dữ liệu

Question

Xem xét một ứng dụng VueJS cho phép hiển thị/chỉnh sửa các bài đăng trên blog.

• Khi nhấp vào "chỉnh sửa blogpost" một phương thức (thành phần Vue) được hiển thị để chỉnh sửa blogpost hiện tại (chỉ là đối tượng js bình thường).
• Để kết thúc này, tôi vượt qua bài đăng blog hiện tại dưới dạng prop thành thành phần phương thức.
• Thành phần phương thức có một số trường biểu mẫu phải được điền bằng thuộc tính blogpost.
• Tuy nhiên, cách Vue là có đối tượng data trên thành phần Phương thức hoạt động như mô hình để điền vào các trường biểu mẫu và ngược lại, được cập nhật khi người dùng thay đổi các trường biểu mẫu.

Vấn đề: Làm thế nào để kết nối các bài đăng trên blog được thông qua như là một prop đến data trường của phương thức thành phần sao cho:

• bài đăng blog populates các trường mẫu
• các bài đăng trên blog được cập nhật khi cập nhật các trường biểu mẫu

Cách Vue chính xác để thực hiện việc này là gì?

Answer 1

Bạn có ba (ít nhất) cách để làm điều đó:

1) Kết nối dữ liệu thông qua các thuộc tính prop, cũng giống như bạn đang làm, nhưng thêm các thuộc tính .sync với nó. Bằng cách này, khi dữ liệu được sửa đổi trên biểu mẫu, nó cũng tự động được sửa đổi trên thành phần. Vấn đề với giải pháp này là bản cập nhật là tự động, vì vậy nếu xác thực không thành công hoặc người dùng đóng phương thức mà không lưu các thay đổi, thì những thay đổi này vẫn được lưu. Ví dụ: https://jsfiddle.net/Lz3aq64f/

2) Cách khác để thực hiện việc này là nhận được phương thức $dispatch sự kiện với thông tin đã lưu khi thông tin được lưu. Phần tử blogpost nên lắng nghe sự kiện này và hành động tương ứng.

Trên phương thức:

this.$dispatch('update-post', this.title, this.author); 

Trên blogpost:

this.$on('update-post', function(title, author) { 
    this.title = title; 
    this.author = author 
}); 

Nếu thành phần blogpost và thành phần đa phương thức không nằm trong hệ thống cấp bậc cùng, mọi thứ trở nên một chút phức tạp hơn, và có lẽ bạn cần phần tử cha mẹ phổ biến để hoạt động như một proxy. Hãy suy nghĩ về các yếu tố modaldispatching thông tin, yếu tố #app bắt nó qua $on và sau đó thực hiện $broadcast thành phần blogpost.

3) Sử dụng một cái gì đó như vuex để hoạt động như một kho lưu trữ trung tâm của trạng thái. Tôi không biết đơn đăng ký của bạn lớn đến mức nào, nhưng đây sẽ là cách sạch nhất để đi: http://vuex.vuejs.org/en/index.html

Chúc may mắn!