**** 更新 ****
解决方案:不费心将 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。
编辑输入字段效果很好,所以它就像自上而下工作,而不是自下而上。我到底错过了什么?
最佳答案
注意:我在本地测试了这个,但我不知道问题中商店状态的具体情况。
<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
}
关于javascript - Vuex : state change not updating input field,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54602849/