javascript - Vuex : state change not updating input field

Question

**** 更新 ****

解决方案:不费心将 Vuex 状态绑定(bind)到表单。我意识到这不值得麻烦，而且我仍然可以序列化表单数据并使用标准约定发送它。彻底重新思考不需要将这么多元素绑定(bind)到 JS 对象中。

**** ORIG ****

好的，有人可以告诉我我在这里缺少什么吗？

我想更新突变函数中的状态，并将更改反射(reflect)在输入字段中。疯狂吧？我猜想更新对象属性会遇到问题，因此在示例中我既引用了对象属性又为该属性定义了特定的 getter，两者都不起作用。然后，为了表示更新输入字段之外的状态，我只需在下面有一个按钮即可执行此操作。

模板:

<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);
}

预期:单击按钮，它会更新状态，并且输入字段值显示“任意”。

实际:点击按钮，会更新状态，但输入字段值不会更新。这适用于两个输入字段，一个直接引用对象属性，另一个有自己的 getter。

编辑输入字段效果很好，所以它就像自上而下工作，而不是自下而上。我到底错过了什么？

Answer 1

注意:我在本地测试了这个，但我不知道问题中商店状态的具体情况。

<input>可以通过 v-model 进行双向绑定(bind)，而不是 computed或watch编辑。它可以使用存储中的值进行初始化(我使用了下面的 mounted 生命周期 Hook )。商店状态仅在 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']), // get the action from the store

    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> 
  }
}

使用此解决方案，您必须确保在商店中创建 getter，如下例所示:

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

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