Ngay khi làm quen với Vue.js tôi bắt tay vào thực hiện một dự án nhưng sau đó tôi đã thất bại vì sự không vững vàng trong kiến thức về cách chia sẻ dữ liệu giữa Laravel và Vuejs. Với Laravel việc lấy dữ liệu và lưu trữ được thực hiện một cách rất thuận tiện nhưng với Vue.js thì khác tôi không tìm ra được cách làm cho Vue hiểu được dữ liệu chia sẻ từ Laravel. Làm sao để Laravel và Vue.js trao đổi dữ liệu một cách nhịp nhàng, câu hỏi đó luôn làm tôi mụ mị nhưng rồi khi tôi bắt đầu suy nghĩ đến một ứng dụng có nhiều tầng (layer), câu chuyện trở nên rõ ràng hơn nhiều.
Trong các ứng dụng, cơ sở dữ liệu là ngọn nguồn của dữ liệu, từ đó các phần khác của ứng dụng được xây dựng, Laravel Eloquent ORM là một giải pháp không liên quan trực tiếp đến các hệ cơ sở dữ liệu cụ thể như MySQL, Postgres, SQLite… nó đơn giản để lấy dữ liệu từ cơ sở dữ liệu, đưa vào các cấu trúc dữ liệu và truyền nó đến các Blade template để hiển thị trên trình duyệt.
Tuy nhiên, mọi thứ trở nên phức tạp hơn khi Vue tham gia vào các ứng dụng với tầng dưới là Laravel. Làm thế nào Vue có thể lấy được dữ liệu và làm thế nào để thay đổi được các bản ghi trong CSDL.
Thiết kế ứng dụng theo tầng
Thiết kế ứng dụng theo tầng sẽ giúp các tầng ứng dụng tách biệt về phần viết mã các yêu cầu khác nhau. Laravel sẽ là tầng trung gian để dữ liệu được lấy lên từ CSDL truyền sang các component của Vue để hiển thị trên ứng dụng. Mặc dù ranh giới thật sự giữa Laravel và Vue không rõ ràng. May mắn thay có một số cách giúp cung cấp cho Vue các dữ liệu cần thiết.
Giải pháp truyền dữ liệu đa tầng
Sử dụng đối tượng Window toàn cục
Cách làm này giống như việc truyền token csrfToken từ Laravel sang Vue.js thường làm. Với các dữ liệu khác có cấu trúc chúng ta thực hiện chuyển sang JSON sau đó gán vào biến nằm trong thẻ <script> của Blade template.
Sử dụng props
Một giải pháp khác giống với khi làm việc trong Laravel: Laravel nhận request, lấy các thông tin từ cơ sở dữ liệu, xào nấu dữ liệu và trả về cho blade template và truyền dữ liệu như props đến Vue component.
Đây là cách tiếp cận hữu ích khi Vue chủ yếu chịu trách nhiệm hiển thị thông tin có được từ cơ sở dữ liệu.
Sử dụng Ajax, Axios, Vue-Resource
Trong giải pháp này, Laravel không chịu trách nhiệm truyền dữ liệu từ nó đến Vue.js mà tạo ra các API cung cấp dữ liệu để Vue có thể lấy dữ liệu thông qua Ajax. Khi Vue thay đổi dữ liệu hoặc tạo mới dữ liệu, nó sẽ được gửi trở lại tầng Laravel bằng các Ajax request thông qua Vue-resource hoặc Axios. Lúc đó, tầng Laravel mới thực hiện trách nhiệm thay đổi dữ liệu trong cơ sở dữ liệu. Đây là cách thường dùng nhất khi chia sẻ dữ liệu giữa các tầng, nó có nhiều ưu điểm do Vue chủ động được thời điểm và cách thức lấy dữ liệu trong khi Laravel chỉ cần đảm nhận việc xây dựng các API.
Một cách khác, ứng dụng đa tầng Laravel + Vue.js sẽ được tách biệt thành fontend và backend với các xử lý fontend được Vue.js đảm nhận còn Laravel đảm nhận phần backend.
Ứng dụng đơn trang SPA
Ứng dụng đơn trang SPA (Single Page Application) là ứng dụng web mà chỉ có một trang duy nhất đảm nhận tất cả các yêu cầu khác, SPA được sử dụng trong các ứng dụng web nổi tiếng như Facebook, Youtube, Gmail, Twitter… Với ứng dụng đơn trang, việc phân tầng rõ nét hơn. Nếu bạn đã quá quen với việc sử dụng Laravel xây dựng các ứng dụng đa trang, thì làm việc với SPA bạn cần thay đổi cách suy nghĩ.
Trong mô hình ứng dụng đơn trang sẽ có hai bộ dữ liệu là cơ sở dữ liệu và các store cục bộ:
- Dữ liệu chính được lấy từ cơ sở dữ liệu, được sử dụng để khởi tạo các trạng thái hoặc store trong ứng dụng SPA. Dữ liệu có truyền đến Vuejs thông qua props, biến window toàn cục hoặc qua ajax.
- Store trong Vuex có thể được sử dụng để lưu các dữ liệu tạm phục vụ xử lý, sau khi các xử lý xong bạn có thể quyết định đẩy trở lại tầng Laravel để ghi xuống cơ sở dữ liệu.
Lời kết
Như vậy chúng ta đã có được những cách thức rõ ràng hơn trong việc xây dựng các ứng dụng có tích hợp Vue.js làm fontend. Chúng tôi cũng đang thực hiện một loạt bài viết về một dự án xây dựng ứng dụng SPA có sử dụng Laravel làm backend và Vue.js (bao gồm cả Vuex, vue-router và vue-resource hoặc axios). Các bài viết này đang trong giai đoạn kiểm tra lần cuối và sớm đăng trên allaravel.com, các bạn chờ đọc nhé.
