Currently, I am facing an issue while attempting to transmit data from my Vue.js frontend to the backend using Vuex and Vue-axios. Despite establishing a Vuex store and Vue-axios services, I encounter an error that reads
[vuex] unknown action type: addGeneral
whenever I attempt to transfer the data.
Below is the structure of my Vuex folder:
-store
-modules
-app
-mutations.js
-state.js
-general.js
-index.js
-actions.js
-getters.js
-index.js
-mutations.js
-state.js
Take a look at the content of module/general.js
:
import { ApiService } from '@/services/api.service'
import { FETCH_GENERAL,
ADD_GENERAL
} from '../actions'
import { FETCH_START,
FETCH_END,
SET_GENERAL,
SET_ERROR,
} from '../mutations'
// Define state, getters, actions, and mutations
Here's what's included in module/index.js
:
import necessary modules
Refer to store/actions.js
:
export const FETCH_GENERAL = "fetchGeneral";
export const ADD_GENERAL = "addGeneral";
Below you'll find store/index.js
:
Setup the Vuex store
Examine store/mutations.js
:
Define mutation types
Regarding the vue-axios folder structure:
-services
-api.services.js
-config.js
Review the content of services/api.services.js
:
Configure API services
Here is the content of config.js
:
Define API URL
Lastly, here's a snippet from my Vue.js component:
Implement a method to add general data
In conclusion, what could be causing the error and what steps should I take to resolve it effectively?