Vuex v模型到对象状态字段

I have a Vuex state, like this (it also has a getter, named configs:

configs: {

    1303401: {

        exampleValue: 'test'

    }

}

I also have an input where I v-model the exampleValue from the Vuex store's state:

<input type="text" v-model="config.exampleValue" />

Here is the computed property I use to return the config:

config: {

    get () {

        return this.$store.getters.configs[1303401]

    },
    set (value) {

        //this should set the configs[1303401] field with the updated exampleValue
        this.$store.dispatch('UPDATE_CONFIG', value)

    }


}

The input's value changes to the value of config.exampleValue, so the computed data is not undefined, but the Vuex state does not update.

Also if I try to console.log the value in the setter, nothing appears in the console, so the setter isn't even executed

It is probably because it is not setting the config computed property, but the config.exampleValue, but I have no idea, how to handle that.

评论
  • 妮听咱话
    妮听咱话 回复

    我认为这是因为您将v模型与get对象的属性一起使用,而setter无法对其进行处理。 您只能使用属性,这是您计算出的属性的外观:

    config: {
        get () {
            return this.$store.getters.configs[1303401].exampleValue
        },
        set (value) {
            this.$store.dispatch('UPDATE_CONFIG', value)
        }
    }
    

    和模板:

    <input type="text" v-model="config" />
    

    因此,您将在存储操作中获得新的exampleValue值。并尝试避免在计算属性(带有表单)中使用对象进行getter / setter操作,因为它具有很多隐藏陷阱。