Search code examples
vue.jsnuxt.jsvuex

Unknown action type in Nuxt Vuex store

I have a problem calling the action from vuex. Everytime I try to access the loginUser action I get an error 'unknown action type' from vuex. maybe I'm not calling it the right way. Please tell me what's wrong with my code.

store: user.js

import axios from 'axios'

export const state = () => ({
    users: [],
    loggedIn: false,
})

export const getters = {
    getLoggedIn: (state) => { return state.loggedIn },
}

export const actions = {
    loginUser({ commit }, payload){
        if(state.loggedIn){
            console.log("you're already logged in!")
        }else{
            return new Promise(async(resolve, reject) => {
                const { data } = await axios.post('/api/users/login-admin', {
                    login: payload.login, 
                    password: payload.password
                })
                if(data.success){
                    commit("loggedIn", true)
                    resolve()
                }else{
                    commit("loggedIn", false)
                    reject('an error has ocurred')
                }
                return data.success
            }).catch(err => alert(errCodes(err.code)))
        }
    },
}

export const mutations = { 
    setLoggedIn(state, payload) {
        state.loggedIn = payload
    }
}

login.vue

    computed: {
        ...mapGetters(['getCount'] , {user: 'getLoggedIn'}),
        ...mapActions([
            'loginUser'
        ]),
    },
    methods: {
        onSubmit: function(){
            this.$store.dispatch({
                type: 'loginUser',
                email: this.login,
                pass: this.pass
            }).then(()=>{
                this.$router.push('../admin_2065')
                this.onReset()
            }).catch(e => console.log(e))
        },
        onReset(){
            this.login = ''
            this.pass = ''
            this.$nextTick().then(() => {
                this.ready = true
            })
        }
    },

error: enter image description here

any help will be appreciated, thanks.

Solution

  • mapActions should be inside the methods option and add the namespace user/ :

      computed: {
        ...mapGetters(['getCount'] , {user: 'getLoggedIn'}),
    },
    methods: {
     ...mapActions([
            'user/loginUser'
        ]),
        onSubmit: function(){
            this['user/loginUser']({
                email: this.login,
                pass: this.pass
            }).then(()=>{
                this.$router.push('../admin_2065')
                this.onReset()
            }).catch(e => console.log(e))
        },
        onReset(){
            this.login = ''
            this.pass = ''
            this.$nextTick().then(() => {
                this.ready = true
            })
        }
    },