Getting "Cannot read properties of undefined (reading 'commit')"NUXT

Question

I am new to Vue and stuck. I am trying to send user input data from a form into a vuex store. From that vuex store, an action will be called (fetching from API) and I would like 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>

Here is my index.vue and getting the error "Cannot read properties of undefined (reading 'commit')"

here is my store.js. I want to use the lat and lon across my app.

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);
        }); 
    },
  };

When I button submit I get the error "Cannot read properties of undefined (reading 'commit')"

I'm not sure what is wrong in that case, seems to be okay so far. What do you have if you `console.log` `this.$store`? Maybe give a try to [`mapMutations`](https://vuex.vuejs.org/guide/mutations.html#committing-mutations-in-components). Which version of Vuex and Nuxt are you using? — kissu, Dec 16 '22 at 00:17
I mean, since you're doing an async call you should be using [`mapActions`](https://vuex.vuejs.org/guide/actions.html#dispatching-actions-in-components) anyway. Commits are used only for sync operations. Or `await this.$store.dispatch` if you want to directly target the store. — kissu, Dec 16 '22 at 00:20
@kissu Vue 2 and Nuxt 2. With dispatch I get the same errors.Dispatch is the correct way to call it my bad. But I still get "Cannot read properties of undefined (reading 'dispatch')" — coolflow90, Dec 16 '22 at 00:25

kissu · Answer 1 · 2022-12-16T00:53:52.907

2

Here is my working repo with the fixes mentioned below.

There are 3 things in your code:

remove vuex from package.json and run yarn again, that one is already baked into Nuxt as stated in the official documentation, those are the only steps needed
all the files inside of store will be namespaced by default for you, since you do have store/store.js, the proper syntax will be

async sendCityName() {
  await this.$store.dispatch('store/fetchCity', this.cityName) //  store prefix
}

since you do use the axios module, you should have the following in your action (using the async/await syntax since it's more modern and preferable)

async fetchCity({ commit }, cityName) {
  const response = await this.$axios.get(
    `https://api.openweathermap.org/geo/1.0/direct`, {
    params: {
      appid: "3d91ba5b3c11d13158a2726aab902a0b",
      q: cityName,
    }
  })
  commit('SET_LAT', response.data[0].lat)
  commit('SET_LON', response.data[0].lng)
}

Looking at the browser's console, you also have some errors to fix.

I can also recommend an ESlint + Prettier configuration so that you keep your code error-proof + properly formatted at all times.

edited Dec 16 '22 at 00:53

answered Dec 16 '22 at 00:48

kissu

40,416
14
65
133

@coolflow90 I've updated my answer with a working GitHub repo, mainly following all the steps that I've described. Didn't fix the `not defined on the instance` because it was not part of the question, – kissu Dec 16 '22 at 00:57
1

Cool, I will take a look at this and study!! Appreciate the effort – coolflow90 Dec 16 '22 at 01:09
i am still getting the dispatch error however lol but i will try some other stuff out – coolflow90 Dec 16 '22 at 01:15
@coolflow90 not with my repo. You're missing one of the steps I've mentioned above. Please give it another read. – kissu Dec 16 '22 at 01:16

Getting "Cannot read properties of undefined (reading 'commit')"NUXT

1 Answers1

Linked