Tách dữ liệu trong vuex

Question

Tôi cần lưu trữ các thực thể khác nhau trong cửa hàng vuex của mình. Ví dụ: Công ty, Nhân viên và Nơi làm việc ...

Những thực thể này được kết nối bằng ID-Mảng.

• Company.employees là một mảng của userIds
• Employee.workplaces được một danh sách các id nơi làm việc
• ...

tôi thực hiện nó cả hai cách tôi biết:

• là một cửa hàng rất lớn duy nhất
• với mô-đun cửa hàng cho mọi thực thể

Cách tiếp cận đầu tiên rất đơn giản nhưng nhanh chóng trở nên rất cồng kềnh. Cách tiếp cận thứ hai là rất sạch sẽ nhưng việc xử lý dữ liệu rất khó khi tôi cần dữ liệu từ 2 cửa hàng để hoàn thành một getter (ví dụ: getWorkplacesByCompany)

Cách ưa thích để lưu trữ dữ liệu đó là gì?

Answer 1

Modular chắc chắn là tốt hơn. Nó tránh các bloat bạn đã đề cập và bạn luôn có thể truy cập dữ liệu từ các mô-đun khác thông qua các tùy chọn rootState hoặc rootGetters được chuyển đến các hàm getter.

Dưới đây là một ví dụ:

const employees = { 
 
    state: { 
 
    employees: [ 
 
     { id: 1, name: 'Jeff' }, 
 
     { id: 2, name: 'Joe' }, 
 
     { id: 3, name: 'Jimmy' }, 
 
     { id: 4, name: 'Jake' }, 
 
     { id: 5, name: 'Jill' }, 
 
    ] 
 
    }, 
 
} 
 

 
const companies = { 
 
    state: { 
 
    companies: [ 
 
     { id: 1, name: 'Foo Co.', employeeIDs: [ 1, 4, 5 ] }, 
 
     { id: 2, name: 'Bar Co.', employeeIDs: [ 2, 3, 5 ] }, 
 
    ] 
 
    }, 
 
    getters: { 
 
    getCompanyEmployees(state, getters, rootState, rootGetters) { 
 
     return (companyID) => { 
 
     let company = state.companies.find((c) => c.id = companyID);   
 
     return rootState.employees.employees.filter((e) => { 
 
      return company.employeeIDs.indexOf(e.id) >= 0; 
 
     }) 
 
     } 
 
    } 
 
    } 
 
} 
 

 
const store = new Vuex.Store({ 
 
    modules: { employees, companies } 
 
}) 
 

 
new Vue({ 
 
    el: '#app', 
 
    store, 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.0/vuex.min.js"></script> 
 

 
<div id="app"> 
 
    {{ $store.getters.getCompanyEmployees(1) }} 
 
</div>

Answer 2

Nếu bạn tổ chức mô-đun và mô-đun con một cách hợp lý, bạn có thể bao gồm getters ở mọi cấp độ trong cửa hàng của mình dựa trên nơi chúng cần dữ liệu. Vì vậy, bạn có thể có các cửa hàng và các môđun con như vậy:

App 
    Blog 
    Authors 
    Posts 
     Tags 

Các getter cho getPostsByAuthor() sẽ là trong module Blog bởi vì nó cần dữ liệu từ cả hai Authors và Posts, trong khi getter cho getPostsByTag có thể là trong Posts mô-đun và getter cho getTagById có thể trực tiếp trong mô-đun Tag.

Answer 3

Tôi muốn nói một cửa hàng có namespaced modules là phương pháp phù hợp. Bạn vẫn có quyền truy cập vào các mô-đun anh chị em. Vì vậy, trong getter của bạn, bạn sẽ vượt qua rootState làm đối số thứ ba của bạn và truy cập vào một không gian tên anh chị em như rootState.Employee.someData.

Xem thêm https://vuex.vuejs.org/en/api.html