Vuex 상태에서 반응형 어레이를 동적으로 생성

Vuex 상태에서 반응형 어레이를 동적으로 생성

컴포넌트가 SST(vuex)에 새로운 reactive-array 필드를 추가하려고 합니다.이전에 Create 훅을 시도했지만 추가된 어레이는 반응하지 않고 일반 JS 어레이일 뿐입니다.

이는 Vue 초기화 시 생성된 기존 어레이에서 요소를 추가/제거하는 것과는 다릅니다.이러한 어레이는 「랩」되어 「어레이 변경 검출」에 주의해, 예상대로 반응합니다.

제 경우 완전히 새로운 어레이 유형의 필드를 SST에 동적으로 추가하면서 동시에 반응하도록 하려고 합니다.가능합니까?

반응성 상세 - 변경 감지 경고:

변경 검출 경고

최신 JavaScript의 제한으로 인해 Vue는 속성 추가 및 삭제를 감지할 수 없습니다.Vue는 인스턴스 초기화 중에 getter/setter 변환 프로세스를 수행하므로 속성이 있어야 합니다.dataVue가 객체를 변환하여 반응하도록 합니다.

다만, 어레이를 동적으로 추가하고 있다고 하는 경우는, 다음과 같습니다.

완전히 새로운 어레이 타입의 필드를 SST에 동적으로 추가하는 것과 동시에, SST를 무효로 하려고 합니다.가능합니까?

문서(굵은 글씨는 내 것):

Vue에서는 이미 생성된 인스턴스에 새 루트 수준 사후 대응 속성을 동적으로 추가할 수 없습니다.단, nested 객체에 무효 속성을 추가할 수 있습니다.Vue.set(object, key, value)방법:

Vue.set(vm.someObject, 'myArrayName', [1,2,3]);

어레이를 리액티브하게 만드는 데 도움이 됩니다.

여기에는 다음 두 가지 문제가 있습니다.

1. vuex를 사용하여 어레이를 동적으로 추가합니다.
2. 이 배열에 동적으로 요소를 추가하고 이 요소를 렌더링합니다.

서버로부터 데이터를 수신할 때 myArray가 존재하지 않기 때문에 add 메서드가 존재하지 않는 경우 어레이를 시작합니다.

아래 내 용돈:

myVuexArray.js

import Vue from 'vue'

const state = {
  myObject: {
    myArray: [],
  }
}

const getters = {
  getMyArray: state => {
    return state.myObject.myArray;
  }
}

const mutations = {
  addElementToArray(state, value) {
    if (state.myObject.myArray === null || state.myObject.myArray === undefined || state.myObject.myArray === '') {
      // initiate array
      state.myObject.myArray = [];
    }
    // add new element to array
    Vue.set(
        state.myObject.myArray,
        state.myObject.myArray.length,
        value
    );

    // creates a new array everytime this solves the reactivity issue
    Vue.set(state, 'myObject.myArray', state.myObject.myArray);

    return state.myObject.myArray;
  },
  removeElementFromArray(state, index) {
    state.myObject.myArray.splice(index, 1);
  }
}

export default {
  state,
  mutations,
  getters
}

안부 전합니다

동적 모듈 등록은 이를 실현하는 데 도움이 됩니다.https://vuex.vuejs.org/en/modules.html

그러면 before Create 훅에 배열 필드를 포함하는 새 모듈을 동적으로 등록할 수 있습니다.

언급URL : https://stackoverflow.com/questions/48949807/dynamically-creating-a-reactive-array-in-the-vuexs-state