自定义组件中没有发生突变？

Question

首先，这是我目前的结构

CHILD COMPONENT

// HTML
<v-select
 v-bind:items="selectItems"
 v-model="selectedItemModel"
 label="Category"
 item-value="text"
></v-select>
<v-text-field
 label="Enter Value"
 type="number"
 v-model="compValModel"
></v-text-field>

// JS
props: {
 selectItems: {
  type: Array,
  required: true
 },
 selectedItem: {
  type: String
 },
 compVal: {
  type: Number
 },
}
date () {
 return {
  selectedItemModel: this.selectedItem,
  compValModel: this.compVal
 }
}

PARENT COMPONENT

// HTML

<component :selecItems="selectItems" :selectedItem="selectOneItem" 
:compVal="compOneVal"></component>

<component :selecItems="selectItems" :selectedItem="selectTwoItem" 
:compVal="compTwoVal"></component>

// JS
data () {
 return {
  selectItems: [some array]
 }
},
computed: {
 selectedOneItem: {
  get () {
    return this.$store.state.selectedOneItem
  },
  set (value) {
    this.$store.commit('selectedOneItem', value)
  }
 },
 selectedTwoItem: {
  get () {
    return this.$store.state.selectedTwoItem
  },
  set (value) {
    this.$store.commit('selectedTwoItem', value)
  }
 },
 compValOne: {
  get () {
    return this.$store.state.compValOne
  },
  set (value) {
    this.$store.commit('compValOne', value)
  }
 },
 compValTwo: {
  get () {
    return this.$store.state.compValTwo
  },
  set (value) {
    this.$store.commit('compValTwo', value)
  }
 }
}

Store

\ STATE
compOneVal: 0,
compValTwo: 0,
selectedOneItem: null,
selectedTwoItem: null

\ GETTER
compOneVal: (state) => state.compOneVal
compTwoVal: (state) => state.compTwoVal
selectedOneItem: (state) => state.selectedOneItem
selectedTwoItem: (state) => state.selectedTwoItem

\ MUTATION
compOneVal (state, v) {
 state.compOneVal = v
},
compTwoVal (state, v) {
 state.compTwoVal = v
},
selectedOneItem (state, v) {
 state.selectedOneItem = v
},
selectedTwoItem (state, v) {
 state.selectedTwoItem = v
}

什么在起作用？

当我不使用组件结构时，通过将 html 显式放置在父组件中。一切正常。

什么不起作用？

当我使用组件结构时，所有输入和选择的变化都没有发生。它只有初始状态值。

那我做错了什么？为什么没有组件结构但没有组件结构却不行？

Answer 1

除了@thanksd

提到的错字（selecItems而不是selectItems）

我会给你一些文档推荐的可以帮助你的提示

使用操作触发突变，而不是直接提交。
你的状态应该用你希望的类型初始化，例如：空数组、对象或字符串
如果您正在访问子组件的存储值，请直接执行（访问子组件中的存储）。除非确实需要，否则不要传递 props，例如：您可能想传递一个与商店中不同的值，或者在 parent
如果你有吸气剂，也许使用 mapGetters 可能是更好的选择。与此同时，mapActions。因此，您可以在组件中使用存储中的直接值，而无需一直使用 this.$store

Answer 2

您有几个语法错误：

你在 child 组件的标签中传递了一个 selecItems 属性，它应该是 selectItems。
你的 child 组件中有一个 date 函数，它应该是 data

但根本问题是您没有修改 parent 组件上的那些计算属性。您只是将它们传递给 child 组件。如果您希望变量在 parent 的范围内更改以响应来自 child 组件的某些事件，您需要从 child 发出一个事件并监听parent.

中的那个事件

通常，您可以通过在 child 组件标签上使用 v-model directive 来实现。这样，当从 child 发出 input 事件时，parent 上的属性将自动更新（无需显式监听 @input 事件在 parent) 中。

但是，由于您 apparently 试图将两个单独的值绑定到 child 组件（selectedItem 和 compVal），您应该发出两个单独的值child 上的任一相关数据属性更改时的事件：

props: {
  selectItems: {
    type: Array,
    required: true
  },
  selectedItem: {
    type: String
  },
  compVal: {
    type: Number
  },
}
data() {
  return {
    selectedItemModel: this.selectedItem,
    compValModel: this.compVal
  }
},
watch: {
  selectedItemModel(value) {
    this.$emit('selectedItemInput', value);
  },
  compValModel(value) {
    this.$emit('compValInput', value);
  }
}

然后，监听 parent 上的那些事件并更新相应的属性：

<component 
  :selecItems="selectItems" 
  :selectedItem="selectOneItem" 
  :compVal="compOneVal"
  @selectedItemInput="selectOneItem = $event"
  @compValInput="compOneVal = $event"
></component>

所以现在，每当 child 组件的 selectedItemModel 或 compValModel 数据属性发生变化时，parent 各自的属性将更新，触发它们各自的计算属性 set 方法，从而更新商店。

自定义组件中没有发生突变？

Mutation is not happening in custom component?

vue.js

vuejs2

vue-component

vuex

什么在起作用？

什么不起作用？