I'm encountering a roadblock as a newcomer to Vue. My goal is to capture user input data from a form and transfer it to a Vuex store. Once in the Vuex store, an action will trigger (fetching from an API) and I aim to retrieve that data back into my app and components.
<template>
<div>
<h1>APP NAME</h1>
<form action="submit" @submit.prevent="sendCityName()">
<label for="query"></label>
<input
type="text"
id="query"
v-model="cityName"
>
<button type="submit">Submit</button>
</form>
<h3>{{ lat }}</h3>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
cityName: ''
}
},
computed: {
coordinates () {
return this.$store.state.lat
}
},
methods: {
sendCityName() {
this.$store.commit('fetchCity', this.cityName)
}
},
}
</script>Index.vue is where I am facing the issue of "Cannot read properties of undefined (reading 'commit')".
I have also included my store.js file in which I intend to utilize the lat and lon values throughout my application.
export const state = () => ({
lat: '',
lon: ''
})
export const mutations = {
SET_LAT(state, payload){
state.lat = payload
},
SET_LON(state, payload){
state.lon = payload
}
}
export const actions = {
async fetchCity({ commit }, cityName) {
// make request
axios.get(
`https://api.openweathermap.org/geo/1.0/direct`, {
params: {
appid: "xxxxxxx",
q: cityName,
}
}).then((response) => {
commit('SET_LAT', response.data[0].lat);
commit('SET_LON', response.data[0].lng);
});
},
};
Upon clicking the submit button, the error "Cannot read properties of undefined (reading 'commit')" occurs.