In my current Vuex state, I have defined a getter named configs, which looks like this:
configs: {
1303401: {
exampleValue: 'test'
}
}
There is also an input where I bind the exampleValue from the Vuex store's state using v-model:
<input type="text" v-model="config.exampleValue" />
To handle this, here is the computed property set up to return the config:
config: {
get () {
return this.$store.getters.configs[1303401]
},
set (value) {
// This section should update the configs[1303401] field with the new exampleValue
this.$store.dispatch('UPDATE_CONFIG', value)
}
}
While the input's value updates according to config.exampleValue, the Vuex state itself does not reflect these changes.
Furthermore, when attempting to console.log the value in the setter function, nothing is displayed in the console, indicating that the setter is not being executed at all.
This issue may be attributed to the fact that it is not setting the config computed property directly, but rather focusing on config.exampleValue. However, finding a solution for this has proven challenging.
A suggestion made by @asi-ple suggests modifying the getter to return configs[1303401].exampleValue, but this approach presents challenges as the config object contains multiple fields, and the page features several inputs. Implementing individual computed properties for each field would be impractical.