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

Question

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

正在调度操作

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

进行突变

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

突变接收路径 = '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))
   }

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

Answer 1

第一件事：不要使用 eval(..)。曾经。此函数允许执行任意代码，并且您什么都不做 来清理值！

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

现在我们知道如何获取要删除的键，我们可以编写一些代码来测试每个部分是否存在以及每个部分是对象还是数组。但是，由于我们现在使用 lodash，我们可以通过使用 _.get and _.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 重写为 reader 的练习。

Answer 2

感谢@Sumurai8，我发现可以传递参数而不是字符串，但实际上是 对商店的引用 这样的。所以不需要把sting和state中的对象的路径一起传递。

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

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

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

How to delete entries from Vuex store using dynamic path as payload for a mutation?

javascript

vue.js

vuex

vue-reactivity