Every time I run my code, the object payload I'm passing as a secondary parameter to my Vuex mutation method ends up being undefined. Both my Vuex and component files are coded in TypeScript.
When looking at my index.ts file for my Vuex store (where I follow the modular store approach), it appears like this:
import Person from '@/models/Person'
import { createStore } from 'vuex'
const userModule = {
state: () => ({
person: Person
}),
mutations: {
setPerson (state:any, person: Person) {
// `state`
state.person = person
}
},
getters: {
getPerson (state:any) {
return state.person
}
}
}
export default createStore({
state: {
},
mutations: {
},
actions: {
},
modules: {
user: userModule
}
})
I make a commitment to the store from my Vue component's methods using this pattern:
<script lang="ts">
export default Vue.extend({
methods: {
bringPersonInfo() {
axios
.get("/getUserInfo", requestHeader)
.then((personResponse: Person) => {
//store person's information in Vue Store
store.commit('setPerson', personResponse)
})
}
}
})
</script>
Can you help me identify the mistake I'm making?