imcvampire/vue-axios

vuex unknown action type while trying to post data to Django backend.

mh-abbassi opened this issue · 1 comments

I am trying to send my vuejs front end data using Vuex and Vue-axios to the backend. I have create a vuex store and vue-axios services But I get an error saying [vuex] unknown action type: addGeneral when I try to pass the data.

This is my vuex folder structure:

-store
    -modules
        -app
            -mutations.js
            -state.js
        -general.js
        -index.js
    -actions.js
    -getters.js
    -index.js
    -mutations.js
    -state.js

This is 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'

const state = {
  general: [],
  errors: {},
  loading: false
};

const getters = {
  general (state) {
    return state.general;
  },
  isLoading (state) {
    return state.loading;
  }
};
const actions = {
  [FETCH_GENERAL] (context, payload) {
    context.commit(FETCH_START);
    return ApiService
      .get('general')
      .then(({data}) => {
        context.commit(FETCH_END);
        context.commit(SET_GENERAL, data.general.results);
    })
  .catch(({response}) => {
      context.commit(SET_ERROR, response.data.errors)
    })
  },
  [ADD_GENERAL] (context, payload) {
    context.commit(FETCH_START);
    return ApiService
      .postGeneral(`general`, '',payload)
      .then(({data}) => {
        context.commit(FETCH_END);
        context.commit(SET_GENERAL, data.general.results);
      })
      .catch(({response}) => {
        context.commit(SET_ERROR, response.data.errors)
      })
  }
};

const mutations = {
  [FETCH_START] (state) {
    state.loading = true
  },
  [FETCH_END] (state) {
    state.loading = false
  },
  [SET_GENERAL] (state, pgeneral) { // can pass in payload
    state.components = pgeneral;
    state.errors = {}
  },
  [SET_ERROR] (state, errors) {
    state.errors = errors
  }
};

export default {
  state,
  getters,
  actions,
  mutations
}

This is module/index.js :

const requireModule = require.context('.', true, /\.js$/)
const modules = {}

requireModule.keys().forEach(fileName => {
  if (fileName === './index.js') return

  // Replace ./ and .js
  const path = fileName.replace(/(\.\/|\.js)/g, '')
  const [moduleName, imported] = path.split('/')

  if (!modules[moduleName]) {
    modules[moduleName] = {
      namespaced: true
    }
  }

  modules[moduleName][imported] = requireModule(fileName).default
})

export default modules

This is store/actions.js :

export const FETCH_GENERAL = "fetchGeneral";
export const ADD_GENERAL = "addGeneral";
This is store/index.js :

import Vue from 'vue'
import Vuex from 'vuex'

// Store functionality
import actions from './actions'
import getters from './getters'
import modules from './modules'
import mutations from './mutations'
import state from './state'

Vue.use(Vuex)

// Create a new store
const store = new Vuex.Store({
  actions,
  getters,
  modules,
  mutations,
  state
})

export default store

This is store/mutations.js :

export const FETCH_START = "loadingOn";
export const FETCH_END = "loadingOff";
export const SET_ERROR = "setError";
// related to general
export const SET_GENERAL = 'setGeneral';
This is my vue-axios folder structure:

-services
    -api.services.js
    -config.js

This is services/api.serviecs.js :

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { API_URL } from './config'
import Cookies from 'js-cookie'

let CSRF_TOKEN = Cookies.get('csrftoken');

export const ApiService = {
  init () {
    Vue.use(VueAxios, axios)
    Vue.axios.defaults.baseURL = API_URL
  },
  get (resource, slug='') {
    return Vue.axios
        .get(`${resource}\${slug}`,)
        .catch((error) => {
          throw new Error(`ApiService ${error}`)
        })
  },
  postGeneral (resource, slug='', obj) {
    return axios
      .post(`${API_URL}\\${resource}\\${slug}`,{
        systemName: obj.systemName,
        regionOfDeployment: obj.regionOfDeployment,
        operatingMode: obj.operatingMode,
        solution: obj.solution,
        baselineMode: obj.baselineMode,
        baselineDetails: obj.baselineDetails,
        projectDuration: obj.projectDuration,
      },
        {
          headers: {
            'X-CSRFToken': CSRF_TOKEN,
            'Content-Type': 'application/json',
          }
        })
      .catch((error) => {
        throw new Error (`ApiService ${error}`)
      })
  },
}
export default ApiService

This is config.js:

export default {}
export const API_URL = 'http://127.0.0.1:8000/api';
and finally this is my vuejs component:

  ...
  <v-btn class="mt-5 mr-2 font-weight-light" color="blue" 
  @click="addGeneral" >
  ...
  methods: {


   addGeneral() {
        let obj = {
            systemName: '',
            regionOfDeployment: '',
            operatingMode: '',
            solution: '',
            baselineMode: '',
            baselineDetails: '',
            projectDuration: ''
        };
        this.postGeneral(obj)
    },
    postGeneral(obj) {
        this.$store.dispatch(ADD_GENERAL, obj)
    }

   }

Why do I get the error and what's the best way to solve it?

This isn't an error from my library.

I think it's better if you ask your question in StackOverflow