0

描述（tl；博士）：

当我通过 将“对象的对象”从 vuex 的商店传递给组件时v-model，模型的修改会产生错误。只有当“对象的对象”通过时。对于任何其他类型，一切都很好。

当我告诉“对象的对象”时，我的意思是这种结构：{'A': {name: 'first'}, 'B': {name: 'second'}}.

工作流程和结构：

  • 结构：view (page)-> parent-> child;
  • 查看Object从商店获取一个并将其传递给组件（-> parrent-> child）；
  • 不允许使用 " .sync"，因此组件不应改变存储中的对象；
  • 更改后child，child必须将结果返回到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>)

吸气剂（来自商店）：

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>

PS我认为问题的发生是因为对象通过引用传递。但是如何对抗这个错误呢？

4

2 回答 2

1

看看Vuex 表单处理文档。它鼓励使用@input事件或v-model计算道具......

假设 obj 是一个计算属性，它从存储中返回一个 Object，这里的 v-model 将尝试在用户输入输入时直接改变 obj.message。在严格模式下，这将导致错误，因为突变不是在显式的 Vuex 突变处理程序中执行的。

于 2016-08-31T12:13:50.147 回答
0

基本上只有2个选项：

  1. 将对象的深层副本传递给props;
  2. 使用@input事件或v-model计算道具（如 pkawiak 的回答https://stackoverflow.com/a/39249362/930170）；

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

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

于 2016-09-15T12:44:53.507 回答