将对象（带有对象）传递给组件时发生 Vuex 突变错误

Question

描述(tl;dr):

当我通过 v-model 从 vuex 的商店将 "Object of Objects" 传递给组件时，模型的修改会产生错误。仅当"Object of Objects"通过。使用任何其他类型都可以。

当我告诉 "Object of Objects" 我的意思是这个结构：{'A': {name: 'first'}, 'B': {name: 'second'}}.

工作流程和结构:

结构：view (page) -> parent -> child;
查看从存储中获取 Object 并将其传递给组件 (->parrent->child);
不允许“.sync”，因此组件不应改变存储中的对象；
在 child 变化后，child 必须 return 结果为 parent，parent 为 view，view 应该通过 vuex 的 setter;

错误信息:

Error when evaluating setter "value.name": Error: [vuex] Do not mutate vuex store state outside mutation handlers. (found in component: <child>)

Getter（来自商店）:

getObjFromStore // return {'A': {name: 'first'}, 'B': {name: 'second'}}

查看（页面）:

<parent :value="getObjFromStore"></parent>

父组件:

<template>
  <div v-for="v in value">
    <child :value="v"></child>
  </div>
</template>

<script>
  import Child from 'components/child'

  export default {
    data () {
      return {}
    },
    props: {
      value: {
        type: Object
      }
    },
    components: {
      Child
    }
  }
</script>

子组件:

<template>
  <input type="text" v-model="value.name">
</template>

<script>
  export default {
    data () {
      return {}
    },
    props: {
      value: {
        type: Object
      }
    }
  }
</script>

P.S. 我认为问题的发生是因为对象通过引用传递。但是如何解决这个错误？

Answer 1

查看 Vuex form handling 文档。它鼓励使用 @input 事件或 v-model 计算道具...

Assuming obj is a computed property that returns an Object from the store, the v-model here will attempt to directly mutate obj.message when the user types in the input. In strict mode, this will result in an error because the mutation is not performed inside an explicit Vuex mutation handler.

Answer 2

基本上只有2个选项：

将对象的深层复制传递给 props；
使用 @input 事件或 v-model 计算道具（就像 pkawiak 的回答）；

我更喜欢使用 deepcopy，同时我确定对象不会太大。这种方法有助于保持代码更干净，更易于维护。

第二种方法仅适用于预期对象非常大的情况

将对象（带有对象）传递给组件时发生 Vuex 突变错误

Vuex mutation error when pass Object (with objects) to component

javascript

vue.js

vue-component

vuex