Vue.js 如何使用Object.assign更新Vuex子密钥？

当

payload.key

是类似

foo

的键时，下面的代码工作正常，但是如何更新类似

foo.bar.a

的子键的值

export const mutations = {
  USER_UPDATE(state, payload) {
    console.log(payload);
    state.user = Object.assign({}, state.user, {
      [payload.key]: payload.value
    });
  }
}

==编辑=== 这被称为：

computed: {
  ...mapState(['user']),
  fooBarA: {
    get() {
      return this.$store.state.user.foo.bar.a
    },
    set(value) {
      this.$store.commit('USER_UPDATE', {
        key: 'foo.bar.a',
        value
      })
    }
  }
}

---

您正在用新对象替换整个

状态。用户

对象引用，这会破坏反应性

此简化代码不说明需要使用

对象。分配

，因此在此cas中，您可以简单地：

导出常量突变={
用户更新（状态、有效负载）{
state.user[payload.key]=payload.value
}
}

---

它保留了原始的

状态。用户

对象引用。

我有一种方法可以工作

其中，

有效载荷键

为

“foo.bar.a”

const突变={
更新用户（状态、有效负载）{
const setter=新函数(
“obj”，
“纽瓦尔”，
“obj.+payload.key+”=newval
);
让用户={…state.user}；
setter（用户、有效负载、值）；
state.user=用户；
}
};

演示

灵感来自

---

谢谢你的提示。然而，

payload.key

正在创建一个类似于state.user['foo.bar.a']的变量，而我需要

state.user.foo.bar.a

，有没有办法将这个字符串转换成子键？这不是一个简单的任务，但这里有一个非常好的解释：。这并不完全符合您的要求，但应该指向正确的方向。我想在这里添加的是：我对原语和数组使用

vuex

，只是为了避免类似的问题。说起来容易做起来难，我知道。但是，如果您能够将

user

创建为

vuex.module

并因此将其展平为原语，那么所有这些问题都会得到解决。也许这是一项乏味的任务，但对我来说，这总是值得的。你发的帖子不鼓励我按我的方式做事。在我称之为突变的方式中是否有什么可以改变的？（我已经更新了我的帖子来展示如何调用突变）。很抱歉，但我认为没有好的方法可以做到这一点：-/主要出于这个原因，最好避免在

vuex

中使用复杂结构。您可能必须扁平化您的数据结构，并为所有

user

s可变异数据添加变体。在这里，我再次提示您使用

vuex

模块，这在某种程度上允许嵌套对象，但您必须添加所有的变体。避免使用lodash很好！