Home » vue » Vuex fails to call module

Vuex fails to call module

Posted by: admin November 26, 2021 Leave a comment

Questions:

When I try to call the module, I get the error [vuex] unknown action type: signUp
that doesn’t work either, what’s the problem? this.$store.dispatch(‘auth/signUp’, this.form)

Method

methods:{
  signUp() {
    this.$store.dispatch('signUp', this.form)
  }
}

Store

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'

Vue.use(Vuex)

export default function createStore() {
  return new Vuex.Store({
      state() {
          return {}
      },
      mutations: {},
      actions: {},
      modules:{
        auth,
      }
  })
}

Module (in src/store/modules/auth.js)

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

Vue.use(Vuex)

export default function createStore() {
  return new Vuex.Store({
     state() {
        return {}
     },
     mutations: {},
     actions: {
       signUp({commit, getters}, data) {
         debugger
       },
     },
  })
}
Answers:

You should not use import Vuex from 'vuex' in your store AND your module. This can cause problems like your module wont be recocnised, because your store already initialized.

Instead you should configure your Vuex store this way:

Store

import { createStore } from "vuex";
import auth from './modules/auth';
export default createStore({
  modules: {
    auth
  },
});

Module

  const state = {
    user
  };
  const getters = {
     getUserState: (state) => state.user
  };
  const actions = {
    signUp({commit}, data) {
      commit('signUpSuccess', data);
    },
  };
  const mutations = {
    signUpSuccess(state, user) {
      state.user = user;
    },
  }
  export default {
    state,
    getters,
    actions,
    mutations,
  };