Looking to make updates to a vuex store that includes an array of objects:
Users have a combobox for making selections, which then updates a property of the object in the database.
However, every time I choose an item from the autocomplete (combobox) I encounter the error message:
[vuex] do not mutate vuex store state outside mutation handlers.I am currently using Nuxt, with an API built with express and a mongodb database.
This is my vuex setup:
State:
export default () => ({
kivaferkoi: {
picked: [],
notYetPicked: []
}
})
Mutations:
export default {
fillKivaferkoi (state, data) {
state.kivaferkoi = data
},
editPicked (state, data) {
state.kivaferkoi.picked = data
}
}
Actions:
import axios from 'axios'
export default {
fetch (context, token) {
return new Promise((resolve, reject) => {
axios.get(process.env.api_url + '/kivaferkoi', {
headers: {
authorization: token
}
})
.then((response) => {
context.commit('fillKivaferkoi', response.data)
resolve(response)
}).catch((e) => {
console.error(e)
reject(e)
})
})
},
update (context, data) {
const token = data.token
delete data.token
return new Promise((resolve, reject) => {
axios.put(process.env.api_url + '/kivaferkoi/', data.value, {
headers: {
authorization: token
}
})
.then((response) => {
context.commit('editPicked', response.data)
resolve(response)
}).catch((e) => {
console.error(e)
reject(e)
})
})
}
}
And here's my Vue component:
<template>
<v-container>
<v-row class="d-flex justify-center">
<v-col cols="3">
<v-card
color="secondary"
rounded="lg"
flat
>
<v-card-title>
Picked One
</v-card-title>
<v-card-text>
<v-list color="secondary">
<template v-for="(item, i) in picked">
<v-list-item :key="i">
<v-list-item-avatar>
<v-img class="avatar" :src="item.avatar ? item.avatar : avatar" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>
{{ item.name }}
</v-list-item-title>
<v-list-item-subtitle>
{{ item.surname }}
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-autocomplete
:key="'combobox' + i"
v-model="item.pickedSummary"
:items="prositSummary"
flat
solo
background-color="background"
/>
</template>
</v-list>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
name: 'Kivaferoi',
computed: {
picked: {
get () {
return this.$store.state.kivaferkoi.kivaferkoi.picked
},
set (value) {
this.$store.dispatch('kivaferkoi/update', { token: this.$auth.getToken('local', value) })
}
}
}
}
</script>