What's Vue.js error message about unknown action type?

My store was created in 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']),
}
}

When trying to execute a vuex action from a module in my component, I encounter an error even though the action is defined:

unknown action type: AUTH,

I am unsure about what the problem could be.

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

To successfully map state and actions in Vuex, utilize the createNamespacedHelpers method:

import { createNamespacedHelpers } from 'vuex'

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

For more information on binding helpers with namespace, refer to this link.

If not using createNamespacedHelpers, you will need to specify the full module namespace for mapping helpers:

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

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

Nuxt

It is important to maintain consistency between classic and modules mode in Nuxt. When utilizing modules mode, Nuxt generates the store instance from the index.js file. State should be exported as a function:

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

Each file within the store directory is considered a module by Nuxt and will be automatically registered as a namespaced module.

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

The users module appears to be correct.

To adjust your component accordingly:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can the 'Read more' feature be modified to impact multiple boxes? (Using jQuery, JS, and CSS)

I am trying to add a 'Read more' feature on my friend's website. I was able to achieve the desired effect, but when I tried to adjust the alignment of the box, it affected the 'Read more' feature. Original design: https://codepen. ...

Problem with transferring data from Google Forms to Google Sheets using Google Apps Script

Currently, I am having an issue with my code that adds responses to a Google Sheets from a Google Forms sheet. The problem is that it always adds the responses to the first column, even if it should go into a different column based on its title. I suspec ...

onkeypress() method not triggering the function

I have a task to prevent users from typing "%" in a textArea, so I implemented the following: However, even after clicking inside the text area, I can still type '%', indicating that my onkeypress function is not working properly or there is an ...

Setting a default value in a dynamic dropdown using AngularJS

I could really use some assistance with my issue as I am fairly new to working with AngularJS. My dilemma is related to setting the default value in a select option when there is only one item available due to it being a dynamic select option. Though there ...

Validating forms in React with Material-UI using hooks

Currently, I am working on a Next.js project that utilizes Material-UI as the primary UI framework. For validation purposes, I am implementing a React hooks form. Within my main component, I have the form structure with separate child components for vari ...

Do you think there is a more efficient way to solve this issue?

const [active, setActive] = React.useState(["active", "", "", "", ""]);``your unique text`` const hrefs = React.useMemo( () => ["/", "/about", "/skills", "/projects", "/contact"], [] ); React.useEffect(() => { setInterval(() => { ...

Supervising ongoing asynchronous tasks within Node.js's promise-based ecosystem

In my Node.js application, I have created a reliable robot program that continuously sends requests to an API. I have taken precautions by handling errors and setting timeouts for promises in order to prevent any issues from occurring. Now, I am looking t ...

What are some efficient ways to reduce the size of the vendor.js file generated by webpack

After running Google LightHouse on my development site, I received a warning advising to "Remove unused JavaScript". The site is built using Vue.js and webpack. It seems that the vendor.js file is being generated from the node_modules directory. I am wond ...

Automatically populating username and password fields

Is it possible to set up automatic username and password filling on my website for users who have saved their login information in their browser? I want the user to just hit enter to login. Some websites already have this feature enabled, but others requi ...

Checkbox does not trigger onCheck event

I am facing an issue with a checkbox component from material-ui where the onCheck event is not firing. <Checkbox label="label" onCheck={onCheck} checked={currentDocument.ispublic} /> function onCheck() { currentDocument.ispublic = !current ...

Solving Addition and Subtraction Errors in Javascript/Jquery

Upon running the script below, it aims to calculate the height of the browser, as well as the heights of both the header and footer, subtracting them from the initial browser height: var a = $(window).height(); alert (a); var b = $('#header').cs ...

Do not need to refresh the form

I developed a PHP-based Feedback form that includes a Popup from Foundation 5. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style type="text/css"> .auto-style1 { margin-left: 1px; ...

What methods are available in JavaScript regex for validating city names?

var cityRegex = /^[a-zA-z] ?([a-zA-z]|[a-zA-z] )*[a-zA-z]$/; is the regular expression I attempted to create. However, it fails when inputting a city name like "St. Petersburg." Update: It seems challenging to create a perfect regex pattern for city name ...

Tips for avoiding parent div click interference in Angular

Working with Angular8, I have a div containing a routelink along with other components including a checkbox. Here's the structure: <div [routerLink]="['/somewhere', blablabla]"> <!--other components that navigate to the ro ...

Stop processing the current websocket connection once a new websocket request is received

Currently, I am utilizing the npm ws module (or its wrapper named isomorphic-ws) for establishing a websocket connection. NPM Module: isomorphic-ws This setup allows me to retrieve an array of data from a websocket++ server situated on the same local mac ...

Creating dynamic email templates in Node.js

I am working on a project using the MEAN stack and I need to implement email functionality. I have created separate email templates, but I want to include a common header and footer in all of them. Route.js router .route('/api/user/register&a ...

Having trouble updating the icon on my website using FontAwsome

Just a heads up - I'm not familiar with HTML/CSS/JS. This template is pre-made, and I'm simply making some adjustments to it. Hello, I'm currently working on my portfolio website and I want to display my projects based on the programming la ...

Just SSR / turn off client-side rendering

<template> <nav v-once> <catalog-menu-container v-once :items="this.awd.children_data" /> </nav> </template> <script> import axios from 'axios'; import catalogMenuContainer from '~/components/cat ...

Can you provide a database of words for different cities, towns, and countries in MongoDB (or in JSON

Currently, I am in the process of developing an application that utilizes MongoDB. One specific feature I am working on implementing is an 'auto-suggest' functionality on the front-end. For example, as a user begins to type the first few letters ...

Mixing without Collections

After initially posting this question yesterday, I realized that I needed to clean up my code before proceeding. However, for my assignment, I am required to create a JavaScript quiz where the questions and answer choices are shuffled every time a user ret ...