Cấu trúc dự án Vue + Vuex

Question

Tôi hơi bối rối ở đây về nơi đặt các chức năng toàn cầu của tôi. Trong nhiều ví dụ, tệp main.js trỏ đến một thành phần ứng dụng và nó được đặt ở đâu đó trong html. Luồng công việc này sẽ tốt cho tôi Nếu tôi chỉ đơn giản là chứa tất cả logic của tôi trong thành phần ứng dụng này. Nhưng tôi đang kết hợp các thành phần với chức năng Laravel để nó không hoạt động cho tôi.

Hiện tại tệp main.js của tôi chứa một loạt các phương thức mà tôi cần có quyền truy cập từ bất kỳ đâu trong ứng dụng của mình. Những phương thức này không chứa bất kỳ sự kiện phát sóng nào để chúng có thể được đặt ở bất cứ nơi đâu miễn là chúng nhận được một cá thể tài nguyên vue.

main.js My file:

https://github.com/stephan-v/BeerQuest/blob/develop/resources/assets/js/main.js

Hy vọng rằng ai đó có thể cho tôi biết nơi tôi có thể đặt phương pháp hữu của tôi nếu tôi được sử dụng vuex hoặc nói chung vì đây dường như không giống như thực hành tốt nhất tại tất cả .

Cảm ơn bạn.

Answer 1

Vuex quản lý tất cả dữ liệu trong ứng dụng của bạn. Đó là "nguồn chân lý duy nhất" cho dữ liệu trên giao diện người dùng của bạn. Vì vậy, bất cứ điều gì thay đổi trạng thái của ứng dụng của bạn, chẳng hạn như thêm một người bạn, hoặc từ chối một người bạn, cần phải lưu thông qua Vuex. Điều này xảy ra thông qua ba loại chức năng chính, getters, actions và mutations.

Check-out: https://github.com/vuejs/vuex/tree/master/examples/shopping-cart/vuex

Getters được sử dụng để lấy dữ liệu từ lưu trữ trong Vuex. Chúng phản ứng với những thay đổi, có nghĩa là nếu dữ liệu Vuex thay đổi, thông tin trong thành phần của bạn cũng được cập nhật. Bạn có thể đặt những thứ này vào một cái gì đó như getters.js để bạn có thể nhập chúng vào bất kỳ mô-đun nào bạn cần chúng.

Tác vụ là các chức năng mà bạn gọi trực tiếp, tức là. acceptFriendRequest khi người dùng nhấp vào nút. Chúng tương tác với cơ sở dữ liệu của bạn và sau đó gửi các đột biến. Trong ứng dụng này, tất cả các hành động là trong actions.js.

Vì vậy, bạn sẽ gọi this.acceptFriendRequest(recipient) trong thành phần của mình. Điều này sẽ cho cơ sở dữ liệu của bạn cập nhật trạng thái của bạn bè, sau đó bạn nhận được xác nhận lại rằng điều này đã xảy ra. Đó là khi bạn gửi một đột biến cập nhật danh sách bạn bè hiện tại của người dùng trong Vuex.

Một đột biến cập nhật dữ liệu trong Vuex để phản ánh trạng thái mới. Khi điều này xảy ra, bất kỳ dữ liệu nào bạn đang truy xuất trong trình thu thập cũng được cập nhật. Dưới đây là một ví dụ của toàn bộ dòng chảy:

import {addFriend} from './actions.js'; 
import {friends} from './getters.js'; 
new Vue({ 
    vuex:{ 
    getters:{ 
     friends 
    } 
    }, 
    methods:{ 
    addFriend 
    } 
} 

store.js:

export default { 
    state:{ 
    friends: [] 
    }, 
    mutations:{ 
    ADD_FRIEND(state, friend) { 
     state.friends.push(friend); 
    } 
    } 
} 

actions.js:

export default { 
    addFriend(friend){ 
    Vue.http.post('/users/1/friends',friend) 
     .then((response)=>{ 
     dispatch("ADD_FRIEND", response) //response is the new friend 
     }) 
    } 
} 

getters.js

export default { 
    friends(state) { 
    return state.friends; 
    } 
} 

Vì vậy, tất cả trong số này được sắp xếp thành các tệp của riêng chúng và bạn có thể imp ort chúng trong bất kỳ thành phần bạn cần. Bạn có thể gọi this.addFriend(friend) từ bất kỳ thành phần nào, và sau đó trình khởi động của bạn được truy cập từ this.friends sẽ tự động cập nhật với người bạn mới khi đột biến xảy ra. Bạn luôn có thể sử dụng cùng một dữ liệu trong bất kỳ chế độ xem nào trong ứng dụng của mình và biết rằng dữ liệu đó là hiện tại với cơ sở dữ liệu của bạn.

Một số công cụ misc:

• thu khí tự động nhận state như là một biến, vì vậy bạn luôn có thể tham khảo tiểu bang của cửa hàng Vuex bạn
• đột biến không bao giờ nên không đồng bộ. Thực hiện tìm nạp/cập nhật trong hành động và sau đó gửi đột biến chỉ để cập nhật dữ liệu của bạn
• tạo dịch vụ (hoặc tài nguyên) bằng cách sử dụng Vue Resource sẽ giúp tìm nạp/cập nhật/xóa tài nguyên dễ dàng hơn. bạn có thể đặt chúng trong các tệp riêng biệt và nhập chúng trong actions.js của bạn để tách logic truy xuất cơ sở dữ liệu được tách riêng. Sau đó, bạn sẽ viết một cái gì đó như FriendService.get({id: 1}) thay vì Vue.http.get('/users/1'). xem https://github.com/vuejs/vue-resource/blob/master/docs/resource.md
• Vuex hoạt động với bộ công cụ vue để tìm "thời gian di chuyển". Bạn có thể xem danh sách mọi đột biến đã diễn ra và tua lại chúng/làm lại chúng. Thật tuyệt vời để gỡ lỗi và xem dữ liệu đang được thay đổi ở đâu.