I need to post some form data to a mockapi endpoint, using Axios and Vuex. I'm using Vue Cli v2, and Vuex 3. The store.js action postUsuarioAxios() seems to be receiving the object with the form data just fine, but when I try to execute "this.axios.post" I get this "undefined post" error:
(https://i.stack.imgur.com/FLnYO.png)
Script:
export default {
methods: {
enviar() {
let objetoPost = {...this.formData}
this.$store.dispatch('postUsuarioAxios', objetoPost)
this.formData = this.getInitialData()
this.formstate._reset()
},
Main.js:
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
import { router } from './router'
import './form'
import './axios'
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
Axios.js:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
Store.js:
Vue.use(Vuex)
export default new Vuex.Store({
state: {
url: 'https://63810a909440b61b0d10552c.mockapi.io/usuarios',
usuarios: [],
ultimoPost: {},
},
actions: {
async postUsuarioAxios({commit}, objetoPost) {
try {
console.log("URL: " + this.state.url)
console.log("USUARIO: " + JSON.stringify(objetoPost))
let response = await this.axios.post(this.state.url, objetoPost, { 'content-type' : 'application/json' })
commit('postUsuario', objetoPost)
console.log(response)
}
catch(error) {
console.error('ERROR en postUsuario', error)
}
},
},
mutations: {
postUsuario(state, objetoPost) {
state.ultimoPost = objetoPost
},
}
})
I tried checking the version of Vue and Vuex I'm using but they're compatible. I believe I'm importing axios correctly too.