알 수 없는 작업 유형: currentUser/loginUser
laravel/vuejs/vuex를 사용하여 로그인 폼을 작성하려고 하는데 작업을 실행하려고 하면 오류가 발생함컴포넌트에서 모듈에서 vuex 작업을 실행하려고 하는데 알 수 없는 작업 유형 currentUser/loginUser가 표시됩니다.
login Form 입니다.
<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
}
나는 내 코드에서 같은 문제에 직면했었다.
가장 먼저 살펴봐야 할 것은 오타가 있는지 여부입니다.
다음으로 모듈을 등록했는지 확인해야 합니다.
당신의 경우 모듈이 등록되지 않았습니다.이렇게 하는 거예요.
작성한 훅(사용하는 버전에 따라 공식 문서에서 어떤 훅이 있는지 확인할 수 있습니다)에는 다음과 같이 모듈을 등록합니다.
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
}
}
이것으로 당신의 문제가 해결될 것 같습니다.이건 나한테 효과가 있었어.
힌트:
- 게시할 때 코드 포맷
- // 오류에 대해 표시되는 항목만 최소로 유지합니다.
- 필요한 것을 추가합니다(이 경우 Import를 생략하고 지금 편집하여 추가할 수 있습니다).
- (물건의) 사용을 생략하다
loginUser
이렇게 밑줄을 치다loginUser(_,data)
- 새 파일에서 getters 돌연변이 등을 분리하여 메인 모듈 파일로 가져옵니다.
- 보다 유지보수가 용이한 코드를 얻기 위해 더 많은 코딩 표준을 참조할 수 있습니다.
언급URL : https://stackoverflow.com/questions/60642702/unknown-action-type-currentuser-loginuser
'programing' 카테고리의 다른 글
각 항목의 Vuex getter (0) | 2022.08.15 |
---|---|
vue 3의 구성 API를 사용하여 플러그인을 보다 쉽게 사용할 수 있는 방법 (0) | 2022.08.15 |
인트로 추가JS 라이브러리에서 Vue-Cli/Webpack 프로젝트로의 (0) | 2022.08.14 |
부모가 Vuejs에서 자식 방출 이벤트를 수신합니다. (0) | 2022.08.14 |
치명적인 오류 컴파일: 비활성 타깃릴리즈: 1.8 -> [도움말 1 ] (0) | 2022.08.14 |