다차원 어레이, Vuex 및 돌연변이

다차원 어레이, Vuex 및 돌연변이

Vuex에 저장된 다차원 배열의 항목을 추가 및 제거하려고 합니다.

배열은 카테고리와 각 카테고리의 그룹이며 하위 카테고리(2차원 배열이 아닌 무한)를 가집니다.

데이터 세트의 예는 다음과 같습니다.

[
   {
     id: 123,
     name: 'technology',
     parent_id: null,
     children: [
          id: 456,
          name: 'languages',
          parent_id: 123,
          children: [
             {
                id:789,
                name: 'javascript',
                parent_id: 456
             }, {
                id:987,
                name: 'php',
                parent_id: 456
             }
          ]
        }, {
          id: 333,
          name: 'frameworks', 
          parent_id 123,
          children: [
             {
                id:777,
                name: 'quasar',
                parent_id: 333
             }
          ]
        }
     ]
   }
]

......Vuex 스토어 내에 있는 이 어레이에 요소를 추가 및 삭제하려면 어떻게 해야 합니까?

저는 보통 Vue를 사용하여 Vuex 스토어 내의 단순한 어레이를 조작하고 있습니다.반응성을 얻으려면 set()를 지정합니다.다만, 조작하고 있는 네스트 어레이의 깊이를 알 수 없기 때문에, 도저히 이해할 수 없습니다.

다음은 재귀를 사용하여 하위 카테고리 요소를 추가하는 방법의 예입니다.

export const append = (state, item) => {
  if (item.parent_uid !== null) {
    var categories = []
    state.data.filter(function f (o) {
      if (o.uid === item.parent_uid) {
        console.log('found it')
        o.push(item)
        return o
      }
      if (o.children) {
        return (o.children = o.children.filter(f)).length
      }
    })
  } else {
    state.data.push(item)
  }
}

가장 먼저 이해해야 할 것은 이다vuex또는 에 기반한 기타 상태 관리 라이브러리flux아키텍처는 네스트된 객체 그래프를 처리하도록 설계되지 않았습니다.또한 말씀하신 임의의/네스트된 객체는 말할 것도 없습니다.엎친 데 덮친 격으로 얕은 상태에서도vuex는 상태 셰이프(모든 원하는 필드)를 미리 정의했을 때 가장 잘 작동합니다.

IMHO, 당신이 취할 수 있는 접근법은 두 가지가 있습니다.

1. 데이터 정규화

This is an approach recommended by vue.js team member [here][2].

정규화 후 계층 구조에 대한 정보를 유지하려면 변환 함수와 함께 플랫을 사용하여 중첩된 개체를 플랫으로 만들 수 있습니다.name다음과 같은 것이 있습니다.

const store = new Vuex.Store({
  ...
  state: {
    data: {
      'technology':                      { id: 123, name: 'technology', parent_id: null },
      'technology.languages':            { id: 456, name: 'languages', parent_id: 123 },
      'technology.languages.javascript': { id: 789, name: 'javascript', parent_id: 456 },
      'technology.languages.php':        { id: 987, name: 'php', parent_id: 456 },
      'technology.frameworks':           { id: 333, name: 'frameworks', parent_id: 123 },
      'technology.frameworks.quasar':    { id: 777, name: 'quasar', parent_id: 333 },
    }
  },
});

그럼, 을 사용할 수 있습니다.Vue.set()의 각 항목에 대해state.data평소처럼.

2. 변경 시 완전히 새로운 상태 객체를 만듭니다.

다음은 의 매뉴얼에 기재되어 있는두 번째 접근법입니다.

개체에 새 속성을 추가할 때 다음 중 하나를 수행해야 합니다.

• 사용하다Vue.set(obj, 'newProp', 123), 또는

• 해당 개체를 새 개체로 바꾸기

...

object-path-immutable이라는 다른 라이브러리를 사용하면 쉽게 이 작업을 수행할 수 있습니다.예를 들어, 아래에 새 카테고리를 추가한다고 가정합니다.languages, 다음과 같은 변환을 작성할 수 있습니다.

const store = new Vuex.Store({
  mutations: {
    addCategory(state, { name, id, parent_id }) {
      state.data = immutable.push(state.data, '0.children.0.children', { id, name, parent_id });
    },
  },
  ...
});

재할당state.data수정될 때마다 새 객체로 이동합니다.vuex리액티비티 시스템은 사용자가 수행한 변경에 대해 적절하게 통지됩니다.state.data이 방법은 데이터를 정규화/비표준화하지 않는 경우에 적합합니다.

언급URL : https://stackoverflow.com/questions/52747205/multidimensional-arrays-vuex-mutations