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

Question

我想为 vuex 状态创建一个突变，但让它动态更新状态 - 让有效负载包含我想从中删除元素的对象的路径和键。

1. 调度 Action

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

1. 做出改变

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

1. 突变接收带有路径 = 'state.xmlValues.Offers[0].data.Pars' 和 key = 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))
   }

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

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

至于我的另一个 mutation 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 原型(prototype)，或者将它导出为某个地方的辅助函数。我将重写您的 addOption 作为读者的练习。