Search code examples
vue.jsnuxt.jsnuxt3.jspinia

Vue: Showing that the function does not exist when I have defined it the relevant store

I am currently working on a simple app to store workout routines in Nuxt 3 and Appwrite. The link to the source code is here.

After logging in and adding in some workouts in the app's UI, whenever I try to call the deleteWorkout function, I get an error in the console saying that the function is not defined, whereas I have clearly defined in the workoutStore. I can't seem to figure out the reason for the same.
The same can be seen in the given screenshot. Console on clicking the delete button

PS:

  1. Most probably the error should be originating from either /pages/workouts.vue, /components/WorkoutDetails.vue or /stores/workout.js.
  2. I am using Appwrite to manage the back-end of the web app, and the instructions to setup the same can be found in the README.md. (Though I don't think the error I am facing is related to the same.)
Solution

  • In your code the problem is, you declear your deleteWorkout() function outside of the actions block in workout.js file.

    Make sure all your functions in the workout store are inside the actions block. Then it will be accessable from the vue component