Блог

Я хочу добиться следующего: у меня есть форма ввода, и мне нужно привязать ее к значению соответствующего сохраненного состояния в 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>
  

Приведенный выше пример будет сохранять обновленное значение для каждого изменения, которое пользователь вносит в графический интерфейс, однако, если я изменю значение соответствующего сохраненного экземпляра в vuex, в поле все равно будет отображаться старое значение вместо обновленного.

Как я могу достичь упомянутой функциональности, описанной в списке вверху? Возможно ли это каким-либо образом с компонентами на основе класса?

Вы инициализировали свое значение хранилища? Наличие неинициализированного значения хранилища обычно приводит к нереактивным свойствам даже в хранилище vuex.