변환에 대한 페이로드로 동적 경로를 사용하여 Vuex 저장소에서 항목을 삭제하는 방법은 무엇입니까?

변환에 대한 페이로드로 동적 경로를 사용하여 Vuex 저장소에서 항목을 삭제하는 방법은 무엇입니까?

vuex 상태에 대한 변환을 만들고 싶지만 동적으로 상태를 업데이트합니다. 페이로드에 요소를 삭제할 개체의 경로와 키가 포함되도록 합니다.

1. 작업 디스패치

deleteOption(path, key) 
{ this.$store.dispatch('deleteOptionAction', {path, key}) }

2. 돌연변이 유발

deleteOptionAction ({ commit }, payload) { commit('deleteOption', payload) }

3. 변환은 경로가 = 'state.xmlValues'인 페이로드를 수신합니다.[0] 데이터를 제공합니다.Pars' 및 키 = 0

deleteOption (state, payload) { 
  let stt = eval('state.' + payload.path)
  Vue.delete(stt, payload.key)
  // delete stt[payload.key] - works the same as Vue.delete
  state.xmlValues.Offers[0].data.Pars = Object.assign({}, Object.values(stt))
   }

저는 국가를 이용하려고 노력해요path] 구문 - 그러나 작동하지 않습니다.경로에 문자열 'state.xmlValues'가 포함됩니다.[0] 데이터를 제공합니다.pars', 그래서 작동하기 위해, 저는 letstt = eval("state." + payload.path)를 사용했습니다.그러나 Vue.delete(stt, payload)를 사용할 때 상태에서 요소를 삭제하기가 까다로워집니다.key) - stt 변수에 로컬로 저장된 요소의 키만 삭제되고 상태는 삭제되지 않습니다.

그런 다음 stt(필요한 요소가 이미 삭제된 stt)로 상태 개체를 다시 할당하고 경로를 하드 코딩했습니다. 이것이 바로 제가 피하려는 것입니다.

state.xmlValues.Offers[0].data.Pars = Object.assign({}, Object.values(stt))

경로를 저장소로 전달한 다음 경로를 명시적으로 하드 코딩하지 않고 상태의 개체를 삭제하려면 어떻게 해야 합니까?

나의 다른 돌연변이 addOption에 대해서도, 나는 또한 상태 객체에 대한 동적 경로를 사용했고, 그것은 instt 평가된 동적 경로를 사용할 때 잘 작동합니다.

addOption (state, payload) {
      let stt = eval('state.' + payload.path)
      Vue.set(stt, payload.key, payload.newEl)
   }

가장 먼저 해야 할 일:사용 안 함eval(..)Ever. 이 함수는 임의 코드 실행을 허용하며 값을 검사하지 않습니다!

더 현명한 선택은 당신의 경로를 직접 구문 분석하는 것입니다.당신이 직접 무언가를 쓸 수도 있지만, 로다쉬는 이미 그것을 위한 기능을 가지고 있습니다.그것은 우리가 얻으려는 것의 각 부분이 있는 배열을 반환합니다.

이제 삭제할 키로 이동하는 방법을 알았으므로 각 부품이 존재하는지, 각 부품이 개체인지 배열인지 테스트하는 코드를 작성할 수 있습니다.하지만, 우리는 지금 로다쉬를 사용하고 있기 때문에, 우리는 다음과 같은 것들을 사용함으로써 우리의 삶을 더 쉽게 만들 수 있습니다.

import { toPath, get, isObjectLike } from 'lodash-es';

function deletePath(source, pathStr) {
    const path = toPath(pathStr);

    const selector = path.slice(0, -1);
    const key = path[path.length - 1];

    let deletableSource = source;

    if (selector.length && isObjectLike(source)) {
      deletableSource = get(source, selector);
    }

    if (isObjectLike(deletableSource)) {
      // We can delete something from this!
      this.$delete(deletableSource, key);
    }
}

이제 우리는 그것을 가지고 있기 때문에, 우리는 그것을 할당하는 것과 같은 것을 할 수 있습니다.Vue프로토타입 또는 도우미 기능으로 내보냅니다.다시 쓰겠습니다.addOption독자의 연습으로서

@Sumurai8 덕분에 이렇게 문자열이 아닌 실제로 매장에 대한 참조로 매개 변수를 전달할 수 있다는 것을 알게 되었습니다.따라서 상태에 있는 물체에 대한 경로로 침을 통과시킬 필요가 없습니다.

<button @click="deleteOption($store.state.xmlValues.Offers[mainData.curOfferKey].data.Pars)">delete</button>

lodash get and to Path 기능도 매우 유용했습니다!

언급URL : https://stackoverflow.com/questions/55600846/how-to-delete-entries-from-vuex-store-using-dynamic-path-as-payload-for-a-mutati