Vuex: изменение состояния не обновляет поле ввода

Question

**** ОБНОВЛЕНИЕ ****

Решение: Не надо связывать состояние Vuex с формой.Я понял, что это не стоит хлопот, и я все еще могу сериализовать данные формы и отправить их в любом случае, используя стандартные соглашения.Имелось полное переосмысление того, что нет необходимости связывать так много элементов в объекты JS.

**** ORIG ****

Хорошо, может кто-нибудь, пожалуйста, скажите мнечего мне здесь не хватает.

Я хочу обновить состояние в функции мутации, чтобы изменения отражались в полях ввода.Сумасшедший, верно?Я предполагаю, что есть проблема с обновлением свойств объекта, поэтому в примере у меня есть и ссылка на свойство объекта, и определение конкретного метода получения для свойства, , ни один из которых не работает .Затем, чтобы представить обновление состояния вне поля ввода, у меня есть кнопка ниже, которая делает это.

Шаблон:

<input :value="user.first_name" @input="UPDATE_USER" />
OR
<input :value="first_name" @input="UPDATE_USER" />
<button v-on:click="updateName">Update</button>

Компонент:

computed: {
   ...mapState({
        user: state => state.user,
        first_name: state => state.user.first_name // specific getter for the property
    })
},
methods: {
    ...mapActions([
        UPDATE_USER,
    ]),
    updateName () {
        this.$store.dispatch(UPDATE_USER_NAME, "anything");
    }
}

Действие:

[UPDATE_USER_NAME] ({commit}, name) {
    commit("updateUserName", name);
},
// Omitted UPDATE_USER function, just takes e.target.name / value and it works anyway

Мутации:

updateUserName (state, name) {
    Vue.set(state.user, "first_name", name);
}

Ожидается: Нажмите кнопку, она обновляет состояние, а значение поля ввода показывает «что-нибудь».

Факт: Нажмите кнопку, обновляется состояние, но поле вводазначение не обновляется.Это относится к обоим полям ввода, одно из которых напрямую ссылается на свойство объекта, а другое имеет свой собственный метод получения.

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

Answer 1

Примечание: Я проверял это локально, но я не знаю точно, как выглядит состояние магазина из вопроса.

<input> может быть двусторонне связан с v-model вместо computed или watch изд.Его можно инициализировать значением из магазина (ниже я использовал хук жизненного цикла mounted).Состояние магазина обновляется только при button щелчке.

<input v-model="firstName"/>
<button @click="updateName">Update</button>

import { mapActions, mapGetters } from 'vuex'

export default {
  data () {
    return {
      firstName: ''
    }
  },

  computed: mapGetters(['getFirstName']),

  methods: {
    ...mapActions(['UPDATE_FIRST_NAME]),

    updateName () {
      // validations can go here etc
      this.UPDATE_FIRST_NAME(this.firstName) // update vuex store state
    }
  },

  mounted () {
    this.firstName = this.getFirstName // initialize this.firstName -> <input> 
  }
}

В этом решении вам нужно будет обязательно создать геттер в своем магазине, как в следующем примере:

const state = {
  user: {
    firstName: ''
  }
}

const getters = {
  getFirstName: state => state.user.firstName
}

Answer 2

Вам нужно watch переменные состояния.Когда он изменит значение, сработает функция часов.

 export default {
    data() {
        return {
            dummy_name: '',
            first_name: '',
        }
    },
    created(){
    },
    computed: {
        dummy_name() {
            return this.$store.state.user.first_name
        },
    watch: {
       dummy_name() {
            this.first_name = this.dummy_name
       }
    }

Надеюсь, что это поможет, и получите представление о том, как работают часы и вычисления.