I've come across several similar inquiries regarding this issue in various forums, yet I am unable to find a solution.
In my form, I'm using mapGetters to update input values based on the Vuex state:
...mapGetters({
show: "getShow"
}),
Here is an example of a form input (using Bootstrap Vue):
<b-form-input
id="runtime"
name="runtime"
type="text"
size="sm"
v-model="show.runtime"
placeholder="Runtime"
></b-form-input>
The form component includes the following method:
async searchOnDB() {
var showId = this.show.showId;
if (!showId) {
alert("Please enter a showId");
return;
}
try {
await this.$store.dispatch("searchShowOnDB", showId);
} catch (ex) {
console.log(ex);
alert("error searching on DB");
}
},
and this action on the store:
async searchShowOnDB({ commit, rootState }, showId) {
var response = await SearchAPI.searchShowOnDB(showId);
var show = {
show_start: response.data.data.first_aired,
runtime: response.data.data.runtime,
description: response.data.data.overview
};
var new_show = Object.assign(rootState.shows.show, show);
commit("setShow", new_show);
}
mutation:
setShow(state, show) {
Vue.set(state, "show", show);
}
searchAPI:
export default {
searchShowOnDB: function (showId) {
return axios.get('/search/?id=' + showId);
},
}
While everything appears to be functioning correctly with the API call and Vuex state updates reflecting properly in Vue Devtools, the form fields do not update automatically. Only when I interact with an input field or manually trigger a commit in Vue Devtools do the fields show_start, runtime, and description get updated.
Interestingly, the following snippet works flawlessly and updates all fields:
async searchShowOnDB({ commit, rootState }, showId) {
var show = {
show_start: "2010-03-12",
runtime: 60,
description: "something"
};
var new_show = Object.assign(rootState.shows.show, show);
commit("setShow", new_show);
}
Despite trying various troubleshooting steps such as handling Promises explicitly, removing async/await and utilizing axios.get(...).then(...), rearranging code, nothing seems to resolve the issue.