未知操作类型：currentUser/loginUser

Question

我正在尝试使用 laravel/vuejs/vuex 构建一个登录表单但是当我尝试执行操作时遇到错误在我的组件中，我试图从一个模块执行一个 vuex 动作，但我收到了一个错误未知操作类型：currentUser/loginUser
这是登录表单：

            <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>

和这个 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
}

Answer 1

我在我的代码中遇到了同样的问题。

首先要检查您是否有错别字。（很多时候这是真的）。

下一步你应该检查你是否已经注册了模块。

在你的情况下，我没有看到正在注册的模块。这就是你的做法。

在创建的钩子中（你可以根据你使用的版本查看官方文档中有哪些钩子）我们像这样注册模块。

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

你的情况应该是这样的也将其添加到您的代码中

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
  }
}

我认为这会解决您的问题。这对我有用。

一些小技巧：

发帖时格式化代码
保持最小值，//只有我们应该看到的错误
添加任何必要的内容（您的情况下缺少导入，您现在可以编辑并添加它）
要像 loginUser 那样跳过对象用法，请使用像这样的下划线 loginUser(_,data)
在新文件中分离你的动作 getter 突变等并导入它们在主模块文件中
您可以参考更多编码标准以获得更易于维护的代码。

未知操作类型：currentUser/loginUser

unknown action type: currentUser/loginUser

vue.js

vuex

vuex-modules