unknown action type: currentUser/loginUser

i'm trynig to build a login form with laravel/vuejs/vuex but i face an error when i try to execute an action In my component , I am trying to execute a vuex action from a module, but I am getting an error unknown action type: currentUser/loginUser
this is loginForm:

            <template>
     <div>
 <div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" v-model="user.email" id="exampleInputEmail1" aria- 
describedby="emailHelp">

    </div>
    <div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="password" class="form-control" v-model="user.password" 
  id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
 <input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
 <button type="submit" @click="login"    class="btn btn-primary">Submit</button>
 < /div>
</template>
  <script>
export default{
data:()=>({
  user:{
      email:"",
      password:""
}
}),
 methods: {
       login(){
this.$store.dispatch('currentUser/loginUser',this.user);
 }  
 }
 }



  </script>

and this currentUser.js:

import axios from "axios";

 const state ={
   user:{

  }

  };
 const getters= {};
 const actions = {
  loginUser({},user){
   axios.post("/login",{
       email: user.email,

       password: user.password
   })
   .then(response=>{
       console.log(response.data);
   })
 }
 };
const mutations={};

export default{
namespaced:true,
 state,
 getters,
actions,
mutations
}

Solution

I had faced the same issue in my code.

The first thing to look for is if you have made any typos. (Many times this is true).

The next thing you should check if you have registered the module.

In your case I do not see the module being registered. This is how you do it.

Inside the created hook (you can checkout what hooks are at the official docs based on the version you are using) we register the module like this.

created () {
  // Register Module EmployeeManagement Module
  if (!moduleEmployeesManagement.isRegistered) {
    this.$store.registerModule('employeesManagement', moduleEmployeesManagement)
    moduleEmployeesManagement.isRegistered = true
  }
}

For your case it would be something like this add this as well in your code

import currentUser from "./modules/currentUser"
...// rest of your code
...// under the methods
created () {
  // Register Module Login
  if (!currentUser.isRegistered) {
    this.$store.registerModule('currentUser', currentUser)
    currentUser.isRegistered = true
  }
}

I think this will solve your issue. This worked for me.

Some tips:

Format your code while posting
keep it minimum, // only what we should see for the error
add whatever is necessary (missing import in your case, you can edit and add it now)
to skip a object usage like in loginUser use a underscore like this loginUser(_,data)
separate your actions getters mutations etc in new files and import them in the main module file
You can refer more coding standards to have a more maintainable code.