I'm currently struggling with adding or updating an object in the store using Vuex.
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
userData: {}
},
mutations: {
ADD_USER_DATA: (state, data) => {
state.userData.push(data)
}
}
})
However, I keep encountering the error message saying state.userData.push is not a function.
In my components:
<template>
<div>
<input type="date" v-model="inputData.date1">
<input type="date" v-model="inputData.date2">
<input type="number" v-model="inputData.date3">
<button @click="submitForm">Submit</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
data () {
return {
inputData: {}
}
},
computed: {
...mapState([
'userData'
])
},
methods: {
...mapMutations([
'ADD_USER_DATA'
]),
submitForm () {
this.ADD_USER_DATA(this.inputData)
}
}
}
</script>
Furthermore, I aim to update the userData with a value from another component so that both components are affected. I am looking for an efficient way to add, replace, or concatenate the old array with a new one. I tried following the demonstration provided in this video.
(Just a heads up: I am still new to learning Vue.js and finding it challenging to understand Vuex's mutations and actions...)