vue.js : error unknown action type?

Question

I created my store store/user.js

export const state = () => ({
      user: {},
    });
export const mutations = {

};
export const actions = {
  AUTH ({commit},{email, password}){
console.log('email, password =', email, password)
  }
};

export const getters = {};

component:

<template>
<form @submit.prevent="AUTH(model)">
  <input type="text"  required v-model.lazy = "model.email">
    <input type="password" required v-model.lazy = "model.password" >
</template>


<script>
  import { mapActions } from 'vuex'

  export default {

    data() {
      return {
        model:{
          email:" " ,
          password:" "

      }

      }
    },
    methods: {
      ...mapActions(['AUTH']),
}
}

In my component , I am trying to execute a vuex action from a module, but I am getting an error, even if this action is defined :

unknown action type: AUTH,

I don't have any idey about problem.

index.js

import Vue from 'vue'
import Vuex from 'vuex'

import user from './modules/user.js'

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    user
  }
})

Answer 1

You need to use createNamespacedHelpers:

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('users')

Binding helpers with namespace

Otherwise, the mapping helpers need the full module namespace:

...mapActions([
  'users/AUTH'
])

// if you are only using one module in the component
...mapActions('users', [
  'AUTH'
])

Nuxt

You're mixing classic and modules mode. When using modules mode, Nuxt creates the store instance from the index.js file. You simply export the state, getters, mutations and actions. State should be exported as a function:

export const state = () => ({
  foo: 0,
  bar: 1
})

Any file within the store directory will be considered a module and Nuxt will automatically register it as a namespaced module.

- store
-- index.js // the store
-- users.js // module 'users'
-- foo.js // module 'foo'

The users module looks otherwise correct.

Make the following changes to your component:

// template
<form @submit.prevent="submitForm">

// script
methods: {
    ...mapActions({
         auth: 'users/AUTH'
    }),
    submitForm () {
        this.auth(this.model)
    }
}