Question

我有一个州：

state: {
  objects: [ 
    { 
      id: 10,
      key2: 'smth',
      key3: 'smth'
      //etc...
    },
    { 
      id: 12',
      key2: 'smth',
      key3: 'smth'
      //etc...
    }
  ]
}

我通过id选择一个，然后我通过v-model更改其键。

吸气剂

  activeObject: state => {
    return state.objects.find((obj) => obj.id === state.objId)
  }

在vue模板中

  computed: {
    obj() {
      return this.$store.getters.activeObject
    }
  },

in html

<input v-model="obj.key2"></input>

问题是vuex告诉我，我必须仅对突变进行更改。我看到了许多解决方案，如computed：get（）set（）或_.deepClone或只更改一个键。但我可以做什么来通过id在变异中重写整个对象？我在数组中的对象可能有很多键，所以将update commit func写入每个键都会非常痛苦。

是否有一个解决方案来重写具有1次提交的许多键的对象？

请不要告诉我使用lodash或其他lbis，只使用普通的vue / js。

Answer 1

是否有一个解决方案来重写具有1次提交的许多键的对象？

当然有：

myMutation(state, { id, newItem }) {
    const item = state.objects.find(item => item.id === id);
    Object.assign(item, newItem);
}

//...
const params = { id: 23, newItem: myNewItem };
store.commit('myMutation', params);

请注意，Vue不会观察数组内部的更改。它不会对它们做出反应。

在OP添加源代码示例后进行编辑

您正在做的是违反Vuex的“单向数据流”概念。如何处理您的用例在Vuex docs：

中有详细解释

假设obj是一个从商店返回Object的计算属性，这里的v模型将尝试在用户输入输入时直接改变obj.message。在严格模式下，这将导致错误，因为突变不在显式Vuex变异处理程序内执行。处理它的“Vuex方式”是绑定值，并在输入或更改事件上调用操作。

因此使用像

这样的事件处理程序

updateObj (e) { this.$store.commit('updateObj', e.target.value); }

通过

从HTML代码调用

<input :value="message" @input="updateObj">

请注意，如上所述，Vue是否能够在存储的Object s / Array上看到您的更改取决于您如何定义它们以及如何访问它们，请参阅{{3 }}

Vue + vuex对象突变

1 个答案: