Question

**** 更新 ****

解决方案：：无需费心将Vuex状态绑定到表单。我意识到这是不值得的麻烦，并且我仍然可以序列化表单数据并始终使用标准约定将其发送。完全重新考虑了不需要将太多元素绑定到JS对象中。

**** 原点 ****

好的，有人可以告诉我我在这里想念的东西吗。

我想更新突变函数中的状态，并使更改反映在输入字段中。疯狂吧？我猜想更新对象属性会很麻烦，因此在示例中，我既引用了对象属性，又为该属性定义了一个特定的获取方法，两者都不起作用。然后，为了表示在输入字段之外更新状态，我下面只有一个按钮可以做到这一点。

模板：

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

编辑输入字段可以很好地工作，因此就像 top-down ，而不是 bottom-up 。我到底想念什么？

Answer 1

您需要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
       }
    }

希望这会有所帮助，并了解如何观察和计算工作。

Answer 2

注意：我在本地进行了测试，但从问题中我不完全了解存储状态。

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

这是一个古老的问题，但是昨天我遇到了同样的问题，解决方案是在输入值属性上使用.prop修饰符，如下所示：

<input :value.prop="first_name" @change="updateName" />

在docs中一个相当随机的地方，引述说：

要使某些属性（如值）正常工作，您需要使用.prop修饰符将其绑定。

希望这对某人有帮助！

Vuex：状态更改不会更新输入字段

3 个答案: