Quasar Framework with VueX - vuex

Question

I am having a problem which I can't seem to solve. First some Code:
<template>
<div>
<q-input name="email" v-model="user.email" />
<q-input name="userName" v-model="user.userName" />
</div>
</template>
<script>
export default {
name: 'UserDetail',
props: {
id: String
},
computed: {
user: {
get () {
return this.$store.state.users.user
},
set (value) {
this.$store.dispatch('users/updateUser', this.id, value)
}
}
}
}
</script>
And here the store action:
export function updateUser ({ commit }, id, user) {
if (id !== user.id) {
console.log('Id und User.Id stimmen nicht überein')
} else {
api.put(`/User/${id}`, user).then(response => {
commit('upsertUser', response.data)
}).catch(error => {
console.log(error)
})
}
}
Mutation:
export const upsertUser = (state, user) => {
const idx = state.userList.findIndex(x => x.id === user.id)
if (idx !== -1) {
state.userList[idx] = user
} else {
state.userList.push(user)
}
if (state.user?.id === user.id) {
state.user = user
}
}
Now as far as I can tell this adheres to the vuex recommendet way of doing things like this (https://vuex.vuejs.org/guide/forms.html#two-way-computed-property)
But I always get the Error: do not mutate vuex store state outside mutation handlers
I can not figure out how to do this. Can someone point me in the right direction?

Answer 1

Dispatching Actions: it only allows one input parameter, from this point you can read the state but you cannot modify it
Mutations: it only allows one input parameter, from here you can read and write about the state, but if you want the variables that listen for the changes of the object to "listen for the changes" you have to use
Object.assign or Vue.set when using objects
I did not understand your data, so I leave you a similar solution, I hope it helps you
let users = {
namespaced: true,
state: {
userList: {
'ID43769906': {
id: 'ID43769906',
email: 'manueltemple#gmail.com',
username: 'mtemple'
}
}
},
mutations: {
upsertUser(state, payload) {
if (state.userList.hasOwnProperty(payload.id)) {
Object.assign(state.userList[payload.id], payload)
} else {
Vue.set(state.userList, payload.id, payload)
}
}
},
actions: {
updateUser({ commit }, payload) {
console.log('api put')
commit('upsertUser', payload)
/*
api.put(`/User/${id}`, user).then(response => {
commit('upsertUser', response.data)
}).catch(error => {
console.log(error)
})
*/
}
},
getters: {
getUser: (state) => (id) => {
let result = null
let data = state.userList || {}
Object.keys(data).forEach((key) => {
if (key === id) {
result = data[key]
return false
}
})
return result
}
}
}
const store = new Vuex.Store({
modules: {
users
},
})
//import { mapGetters } from 'vuex'
new Vue({
store,
el: '#q-app',
data: function () {
return {
id: 'ID43769906'
}
},
mounted () {
window._this = this
},
computed: {
...Vuex.mapGetters('users', ['getUser']),
user: {
get () {
return this.getUser(this.id)
// return _this.$store.getters['users/getUser'](this.id)
},
set (value) {
this.$store.dispatch('users/updateUser', value, { root: true })
}
}
}
})
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/#quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>
<div id="q-app">
<div>
<q-input name="email" v-model="user.email" />
<q-input name="userName" v-model="user.username" />
</div>
</div>
https://jsfiddle.net/idkc/Lu21eqv9/46/