I am currently working with an array of computed properties that are generated from the store's state:
computed: {
...mapGetters([
'$tg',
]),
...mapState({
podcastList: state => state.listening.podcastList,
}),
tabList: {
get() {
const questionTitle = this.$tg('questions');
const list = this.podcastList.map((podcast, index) => ({
...podcast,
title: `${questionTitle}${index + 1}`,
answers: [...podcast.answers],
}));
return list;
},
set(value) {
// I want to dispatch an action here...
console.log('set', value);
},
},
}
The podcastList is constructed as an object array:
[
{
id: 1,
answers: [
{ id: 1, content:'foo'}, { id: 2, content: 'bar'}
]
}, //.....
]
To display a group of input elements bound to the answers, I use the v-for directive. It appears as follows:
<div class="columns is-vcentered" v-for="(answer, index) in tab.answers" :key="index">
<input type="text" v-model="answer.content"/>
</div>
// Here, tab represents an element within my tabList
The issue arises when I try changing the input values - the computed setter does not trigger and I receive the following message:
"Error: [vuex] do not mutate vuex store state outside mutation handlers."
While I understand that direct state modifications are not allowed, I am unsure how to dispatch an action similar to the example shown on the official website. Any assistance would be greatly appreciated. Thank you.