Как удалить записи из хранилища Vuex, используя динамический путь в качестве полезной нагрузки для мутации?

Question

Я хочу создать мутацию для состояния vuex, но заставляя его динамически обновлять состояние - чтобы полезная нагрузка включала путь к объекту, из которого я хочу удалить элемент, и ключ.

1. Отправка действия

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

Передача мутации

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

Мутация получает полезную нагрузку с path = 'state.xmlValues.Offers [0] .data.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))
   }

Я пытался использовать состояние [payload.path] синтаксис - но это не работает.Путь включает строку 'state.xmlValues.Offers [0] .data.Pars', поэтому, чтобы она работала, я использовал let stt = eval ('state.' + Payload.path).Но затем удалить элемент из состояния становится сложно: при использовании Vue.delete (stt, payload.key) - он удаляет только ключ элемента, локально хранящийся в переменной stt, а не в состоянии.

Затем я переназначил объекты состояния с помощью stt (из которого уже удален нужный элемент), жестко прописав путь - и вот чего я стараюсь избегать:

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

Как мне пройтипуть к хранилищу, а затем использовать его для удаления объекта в состоянии без явного кодирования пути?

Что касается моей другой мутации addOption, я также использовал динамический путь к объекту состояния - ион отлично работает при использовании динамического пути, оцененного в STT

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

Answer 1

Перво-наперво: не используйте eval(..).Когда-либо.Эта функция допускает выполнение произвольного кода, и вы ничего не делаете для очистки значения!

Более разумным вариантом было бы проанализировать ваш путь самостоятельно.Вы могли бы написать что-нибудь самостоятельно, но у lodash уже есть функция toPath для этого.Он возвращает массив с каждой частью того, что мы пытаемся получить.

Теперь, когда мы знаем, как получить ключ, который мы хотим удалить, мы могли бы написать некоторый код, который проверяет, существует ли каждая часть и существует ли каждая частьэто объект или массив.Но, поскольку мы сейчас используем lodash, мы могли бы сделать нашу жизнь проще, используя _.get и _.isObjectLike:

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 как упражнение для читателя.

Answer 2

Благодаря @ Sumurai8 я понял, что можно передать параметр не в виде строки, а на самом деле ссылку на хранилище , как это.Так что не нужно передавать жало с путем к объекту в состоянии.

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

Lodash get и toPath функция также была очень полезна!