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

Question

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

Answer 1

您正在用一个新的Object替换整个state.userObject引用，这会破坏反应性。

这个简化的代码并没有证明使用Object.assign的必要性，所以在这种情况下，您可以简单地：

export const mutations = {
USER_UPDATE(state, payload) {
state.user[payload.key] = payload.value
}
}

它保留了原始的state.user对象引用。

Answer 2

我有一种行之有效的方法。

其中payload.key是"foo.bar.a"

const mutations = {
UPDATE_USER(state, payload) {
const setter = new Function(
"obj",
"newval",
"obj." + payload.key + " = newval;"
);
let user = { ...state.user };
setter(user, payload.value);
state.user = user;
}
};

Demohttps://codesandbox.io/s/vuex-store-nested-key-setter-x1n00

灵感来自https://stackoverflow.com/a/30360979/815507