1

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

  1. 调度动作
deleteOption(path, key) 
{ this.$store.dispatch('deleteOptionAction', {path, key}) }
  1. 提交突变
deleteOptionAction ({ commit }, payload) { commit('deleteOption', payload) }
  1. 突变接收带有 path = '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))

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

至于我的其他突变 addOption，我还使用了状态对象的动态路径 - 并且在使用 stt 中评估的动态路径时效果很好

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

2 回答 2

1

首先要做的事情：不要使用eval(..). 曾经。此函数允许执行任意代码，并且您无需对值进行任何清理！

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

现在我们知道如何获取要删除的键，我们可以编写一些代码来测试每个部分是否存在以及每个部分是对象还是数组。但是，由于我们现在使用的是 lodash，我们可以使用_.getand让我们的生活更轻松_.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作为读者的练习。

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

于 2019-04-09T21:31:33.740 回答
0

感谢@Sumurai8，我发现可以将参数不是作为字符串传递，而是像这样传递对商店的引用。因此，无需将带有路径的字符串传递给 state 中的对象。

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

lodash get和toPath函数也非常有用！

于 2019-04-14T10:07:34.787 回答