Javascript 如何使用动态路径作为变异的有效负载从Vuex存储中删除条目？

我想为vuex状态创建一个变体，但要使其动态更新状态—使有效负载包含指向我要从中删除元素和键的对象的路径

派遣行动

进行突变

变异接收路径为'state.xmlValues.Offers[0].data.Pars'且键为0的有效负载

我尝试使用state[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))

如何将路径传递到存储，然后使用它删除状态中的对象，而不显式地对路径进行硬编码？

至于我的另一个选项，我还使用了state对象的动态路径——当使用stt中计算的动态路径时，它非常有效

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

---

第一件事：不要使用

eval（…）

。曾经此函数允许执行任意代码，您可以不执行任何操作来清除该值

一个更明智的选择是自己解析路径。你可以自己写一些东西，但是lodash已经具备了这个功能。它返回一个数组，其中包含我们试图获取的内容的每一部分

现在我们知道了如何获取要删除的键，我们可以编写一些代码来测试每个部分是否存在，以及每个部分是否是对象或数组。但是，由于我们现在使用的是lodash，我们可以通过使用和：

现在我们有了它，我们可以做一些事情，比如将它分配给

Vue

原型，或者将它导出为某个地方的辅助函数。作为读者练习，我将重写您的

addOption

---

多亏了@Sumurai8，我发现可以像这样传递一个参数，而不是字符串，而是对存储的引用。因此，无需将路径传递给处于状态的对象

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

删除

lodashget和toPath函数也非常有用

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

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

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);
    }
}

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