programing

Vue.js/Vuex 로그인: [vuex] 알 수 없는 작업 유형: postLogin.

prostudy 2022. 5. 24. 21:54
반응형

Vue.js/Vuex 로그인: [vuex] 알 수 없는 작업 유형: postLogin.

나는 Vuejs를 처음 접하지만 Vuex는 더욱 그렇다 - 나는 Vue와 Vuex의 기본을 이해한다.나는 로그인을 하기 위해 애쓰고 있다.내가 받는 오류는 다음과 같다.

[vuex] unknown action type: postLogin. 

나는 api를 성공적으로 치고 싶다.나는 이미 백엔드에 (django와 함께) 사용자를 만들었다.그래서 나는 관리 포털을 통해 로그인 할 수 있다.아피스/axios를 통해 vue 프런트엔드를 사용하여 로그인 시도 중.

여기 내 부품이 있다.vue 코드:

             <v-card-text>
               <v-form @submit.prevent="postLogin(email, password)">
                 <v-text-field v-model="email" prepend-icon="person" name="login" label="Login" type="text"></v-text-field>
                 <v-text-field v-model="password" prepend-icon="lock" name="password" label="Password" id="password" type="password"></v-text-field>
                 <v-card-actions>
                   <v-spacer></v-spacer>
                   <v-btn type ='submit' color="primary">Login</v-btn>
                 </v-card-actions>
               </v-form>
             </v-card-text>

다음은 내 auth.js 저장소 작업:

const actions = {
  postLogin (context, payload) {
    return axios.post('/api/users/login/', payload)
      .then(response => {})
      .catch(e => {
        context.commit('setAuthError', true)
        console.log(e)
      })
  },

다음은 작업을 호출하려는 구성 요소 스크립트:

<script>
import postLogin from '@/store/modules/auth'

  export default {
    data: () => ({
      drawer: null,
      email: '',
      password: ''
    }),
    props: {
      source: String
    },
    methods: {
      postLogin (email,password) {
        this.$store
          .dispatch('postLogin', {email, password}).then(()=> this.$router.push({name: 'dashboard'}))
      }
    }
  }
</script>

모든 걸 다 해봤으니 제발 도와줘.

네 것 같다.vuex모듈을 사용하고 있다.만약 당신이 그들과 함께 네임스페이스를 설정한다면(즉, 당신이 선언하는 것)namespaced: true모듈에서), 그 다음action더 이상 글로벌 네임스페이스에 있지 않다.당신은 당신의 코드를 조정해야만 파견할 수 있다.auth/postLogin대신:

this.$store .dispatch('auth/postLogin', {email, password}) .then(() => this.$router.push({name: 'dashboard'}));

위의 내용은 이 이름보다 앞선 모듈을 등록했을 때root가게, 너도 이름을 지어라.auth. 다른 것에 이름을 붙이면 조정해야 한다.dispatch()이에 따라 다음 사항을 호출하십시오.

// inside your src/store/index.js
import auth from './modules/auth';

...
const store = new Vuex.Store({
  ...
  modules: {
    auth,        // <-- call dispatch('auth/postLogin', {email, password})
    auth: auth,  // <-- call dispatch('auth/postLogin', {email, password})
    authen: auth // <-- call dispatch('authen/postLogin', {email, password})
  }
});

참조URL: https://stackoverflow.com/questions/52709493/vue-js-vuex-login-vuex-unknown-action-type-postlogin

반응형