Error "[vuex] unknown action type:" with vuejs

Question

Created a new service .js called room.module.js and inside my Vue view I have the following event on form submit:

submit: function(e) {
      e.preventDefault();

      var name = this.$refs.name.value;
      var capacity = this.$refs.places.value;

      // dummy delay
      setTimeout(() => {
        // send update request
        this.$store.dispatch(CREATE_ROOM, {
          "name": name,
          "places": capacity
        });
      }, 2000);

and my service room.module.js:

// action types
import ApiService from "@/core/services/api.service";
import JwtService from "@/core/services/jwt.service";

export const CREATE_ROOM = "createNewRoom";

// mutation types
export const SET_ROOM_INFO = "setRoomInfo";

const state = {
  room_info: {
    name: "Room 1",
    places: 10,
    status: 1
  }
};

const getters = {
  currentRoomInfo(state) {
    return state.room_info;
  }
};

const actions = {
  [CREATE_ROOM](context, payload) {
    if (JwtService.getToken()) {
      ApiService.setHeader();
      ApiService.put("/room/create", payload).then(({ data }) => {
        context.commit(SET_ROOM_INFO, payload);
        return data;
      });
    }
  }
};

const mutations = {
  [SET_ROOM_INFO](state, room_info) {
    state.room_info = room_info;
  }
};

export default {
  state,
  actions,
  mutations,
  getters
};

but when I submit the form, the following error occurs: [vuex] unknown action type: createNewRoom I know I'm missing something, but can't figure out what. Any ideas? Thank you!

Answer 1

It seems it needs to be added to the Vuex store.