vuex에서 데이터 분리

vuex에서 데이터 분리

vuex 스토어에 다른 엔티티를 저장해야 합니다.예를 들어, 회사, 직원 및 직장...

이러한 엔티티는 ID-Array로 연결됩니다.

• Company.employees는 UserId 배열입니다.
• 직원.Workplace는 Workplace ID 목록입니다.
• ...

제가 아는 두 가지 방법으로 구현했습니다.

• 하나의 큰 가게로서
• 모든 엔티티에 대해 스토어 모듈 포함

첫 번째 접근법은 간단하지만 빠르게 비대해진다.두 번째 접근 방식은 매우 깨끗하지만 getter를 완료하기 위해 2개의 스토어의 데이터가 필요한 경우(예: get Workplaces By Company) 데이터 처리가 어렵습니다.

이러한 데이터를 저장하는 바람직한 방법은 무엇입니까?

확실히 모듈러 쪽이 낫습니다.이 기능을 통해 말씀하신 대로의 번짐이 방지되고rootState또는rootGettersgetter 함수에 전달되는 옵션입니다.

다음은 예를 제시하겠습니다.

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>

모듈 및 서브모듈을 논리적으로 구성하면 데이터가 필요한 위치에 따라 저장소의 모든 레벨에 getter를 포함할 수 있습니다.따라서 다음과 같은 스토어와 서브모듈이 있을 수 있습니다.

App
  Blog
    Authors
    Posts
      Tags

의 취득자getPostsByAuthor()에 있을 것이다.Blog양쪽에서 데이터가 필요하기 때문에 모듈로 이동합니다.Authors그리고.Posts단, 의 취득자는getPostsByTag에 있을 수 있습니다.Posts모듈 및 게터getTagById에 직접 존재할 수 있습니다.Tag모듈.

모듈 이름을 붙인 하나의 상점이 올바른 접근법이라고 생각합니다.형제 모듈에 계속 액세스할 수 있습니다.그래서 네 개터 안에서 넌 합격할 거야rootState세 번째 인수로 형제 이름 공간에 액세스합니다.rootState.Employee.someData.

자세한 것은, https://vuex.vuejs.org/en/api.html 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/46365109/separating-data-in-vuex