基于类的Vue组件不适用于v-model和vuex

问题描述

我想实现以下目标：我有一个表单输入，需要将其绑定到vuex中相应存储状态的值。

• 只要该字段中的值通过用户交互而更改，商店就会被更新后的值覆盖。
• 只要在vuex存储中更新了值，该字段就会显示更新后的值

以下代码段应该对此进行了很好的描述：

<template>
    <b-form-input
      :id="inputField.id"
      :placeholder="inputField.placeholder"
      :disabled="inputField.disabled"
      v-model="input"
</template>

<script lang="ts">
    import ...

    @Component
    export default class InputWrapper extends Vue {
        @Prop() element!: Input

        inputField: Input = new Input(this.element)

        get input (): string {
            return this.$store.getters.getInputById(this.inputField.id).value
        }

        set input (value: string) {
            this.inputField.value = value
            this.$store.commit('setInput',this.inputField)
        }
    }

</script>

上面的示例将为用户在GUI中进行的每个更改存储更新后的值，但是，如果我在vuex中更改了相应存储实例的值，则该字段仍将显示旧值而不是更新后的值。

如何实现顶部列表中所述的功能？使用基于类的组件可以通过某种方式实现吗？

解决方法

你有没有初始化你的商店价值？ 具有未初始化的存储值通常会导致非反应性属性，即使在 vuex 存储中也是如此。