Vue.js 通过选择输入/w Vuex存储绑定动态组件

我不知道如何基于selectbox选项更改动态组件，该选项具有到Vuex存储的双向绑定。 我的单文件组件（Fieldvalue）包含此动态组件和选择框。 它的类型值来自Vuex存储区，在该存储区中，可以通过父组件传递的fieldId找到它。 对于ID为41的字段，有一个fieldvalue组件。 fieldtypeComponent的get（）函数必须知道父级传递的道具传递的fieldId值，以便在存储的fieldvalues数组中搜索ID。
但我这样做是行不通的。（注释掉的行）
有什么想法吗

我的Vuex商店getter：

export function getFieldvalueTypeByFieldnameId(state){
    return (fieldId) => {
        const fieldvalue = state.form.fieldvalues.find(e => e.fieldId == fieldId);
        return fieldvalue.type;
    }
}

突变：

export function setFieldvalueType(state, obj){
  const { type, fieldId } = obj;
  const fieldvalue = state.form.fieldvalues.find( e => e.fieldId === fieldId );
  fieldvalue.type = type;
}

我的Vuex存储状态示例：

{
  "form": {
    "name": "",
    "fieldvalues": [
      {
        "formularId": null,
        "fieldId": 41,
        "value": {},
        "type": ""
      },
      {
        "formularId": null,
        "fieldId": 44,
        "value": {},
        "type": ""
      }
    ]
  }
}

我的单个文件组件：

<template>
  <div class="row">
    <div class="col-3 self-center">
      <q-select
        square
        filled
        v-model="fieldtypeComponent"
        :options="fieldtypes"
        option-value="component"
        map-options
        emit-value
        label="Type"
      />
    </div>
    <div class="col">
      <template
        v-if="fieldtypeComponent === null || fieldtypeComponent == undefined">
        <p>no type selected</p>
      </template>
      <component v-else :is="fieldtypeComponent"></component>
    </div>
  </div>
</template>

<script>
import IconField from "components/fieldtypes/IconField";
import TextField from "components/fieldtypes/TextField";

export default {
  name: "Fieldvalue",
  data() {
    return {
      selected: "",
      fieldtypes: [
        { label: "Icon", component: "IconField" },
        { label: "Text", component: "TextField" }
      ]
    };
  },
  components: {
    IconField,
    TextField
  },
  computed: {
    fieldtype: function() {
      return this.$store.getters["formular/getFieldvalueTypeByFieldnameId"];
    },
    fieldtypeComponent: {
      get() {
        //return this.fieldtyp(this.fieldnameId);
        //return this.$store.getters["formular/getFieldvalueType"];
        return null;
      },
      set(type) {
        const payload = {
          type,
          fieldId: this.forFieldnameId
        };
        this.$store.commit("formular/setFieldvalueType", payload);
      }
    }
  },
  props: {
    forFieldnameId: { type: Number, required: true }
  },
  methods: {
    changeComponent() {
      this.fieldtypeComponent = this.selected;
      const payload = {
        type: this.selected,
        fieldId: this.forFieldnameId
      };
      this.$store.commit("tarife/setFieldvalueTyp", payload);
    }
  }
};
</script>

未选择任何类型

从“组件/字段类型/IconField”导入IconField；
从“组件/字段类型/文本字段”导入文本字段；
导出默认值{
名称：“字段值”，
数据（）{
返回{
选定：“，
字段类型：[
{标签：“图标”，组件：“IconField”}，
{标签：“文本”，组件：“文本字段”}
]
};
},
组成部分：{
IconField，
文本字段
},
计算：{
字段类型：函数（）{
返回此。$store.getters[“formular/getFieldvalueTypeByFieldnameId”]；
},
fieldtypeComponent：{
得到（）{
//返回this.fieldtyp（this.fieldnameId）；
//返回此.$store.getters[“formular/getFieldvalueType”]；
返回null；
},
套装（类型）{
常数有效载荷={
类型，
fieldId:this.forFieldnameId
};
这是.$store.commit（“formular/setFieldvalueType”，有效载荷）；
}
}
},
道具：{
forFieldnameId:{type:Number，必需：true}
},
方法：{
changeComponent（）{
this.fieldtypeComponent=this.selected；
常数有效载荷={
类型：此选项已选定，
fieldId:this.forFieldnameId
};
这是.$store.commit（“tarife/setFieldvalueTyp”，有效载荷）；
}
}
};

关于我想做什么的其他信息：
我在公式中用一个名字定义了一些字段。对于该表单中的每个字段名，我希望稍后保存一个值。
但该值（javascript对象/JSON）根据select输入中的choosen组件而有所不同。（TextField或IconField）
我不知道我的传承方式是正确的还是过于复杂。特别是关于双向绑定或仅向父组件发送，并让它处理完整的逻辑。
我还需要以某种方式将所选组件中的值绑定到Vuex store fieldvalue条目

---

也许我的方法是错误的，我应该完全不同吗？

可以在参数列表

setFieldvalueType（state，{type，fieldId}）中分解对象。