The return value of a Vuex dispatch is void

Here is the code snippet I am working with:

signin(context, payload, resolve) {
    console.log("Processing SIGNIN action")

    const userEmail = payload.locmail
    const userPassword = payload.locpass

    backend.get("api/auth/signin", {
      headers: {
        'planck': 'FRESH'
      },
      crossDomain: true,
      params: {
        password: userPassword,
        email: userEmail
      }
    }).then(function(response) {
      console.log("Request SENT")
      if (response.data.auth === 'TRUE') {
        context.commit('authenticate', response.data.planck)
        state.isAuthenticated = true
      } else {
        state.isAuthenticated = false
      }
      console.log(response)
      return Promise.resolve(response)
    });
  }

When calling this from a component:

this.$store.dispatch('signin', {
        locmail,
        locpass
      }).then(response => {
        console.log(response);
      });

The issue arises when the console log prints undefined. Can someone please help me in identifying what might be wrong here? The documentation suggests using resolve(), but doing so results in an error saying that it's not a function.

Answer №1

Make sure to include the backend promise when returning from the signin action.

  signin(context, payload) {
    // ...

    // Remember to return a Promise
    return backend.get("api/auth/signin", {
      /* ...*/
    }).then(function(ret) {
      /* ... */
    });
  }

Additionally, be cautious of modifying a state object within the action as this should be reserved for mutations.

If you're utilizing strict mode during development, a warning will be displayed regarding this practice.

Answer №2

The promise is not being returned in your code. Make the necessary changes to your signin() function as recommended by @Emile Bergeron:

signin(context, payload) {
    console.log("SIGNIN action")

    const email = payload.locmail
    const password = payload.locpass

    return backend.get("api/auth/signin", {
      headers: {
        'planck': 'FRESH'
      },
      crossDomain: true,
      params: {
        password: password,
        email: email
      }
    }).then(function(response) {
      console.log("SENT")
      if (response.data.auth === 'TRUE') {
        context.commit('authenticate', response.data.planck)
        state.isAuthenticated = true
      } else {
        state.isAuthenticated = false
      }
      console.log(response)
      return Promise.resolve(response)
    });
  }

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

Creating a modal in Ruby on Rails with Bootstrap

I'm attempting to utilize bootstrap modal with ajax, but I'm facing an issue where the screen darkens upon clicking, but the modal never appears. Any tips or a better approach to tackle this problem? measures/index.html.erb <%= link_to &apo ...

Creating a personalized router with Nuxt

Currently, I am working on setting up a custom route in Nuxt using the following nuxt.config.js: router: { base: '/', router: { extendRoutes (routes, resolve) { routes.push({ name: 'custom', pa ...

Exploring the world of Ajax with jQuery

Could someone help me figure out how to integrate Ajax into my PHP code so that the content can load dynamically? Currently, it looks something like this: First, a user selects a category: <li><a href='?genre=sport'>Sport</a>& ...

Exporting variables in node.js allows you to share data between different

Hi, I'm currently working with a file that looks like this: module.exports = { some variables that are being exported here, execute(message) { } } I want to export the message parameter to another file. I've attempted using var msg ...

What could be causing the unexpected "undefined" result when trying to retrieve values from my array

Let me give you a brief overview. I am currently working on a Calendar app using React, react-calendar, and date-fns. My current challenge involves extracting values from an array of objects within a forEach loop. Here is the array in question: datesToAd ...

How to reset the width of custom-sized table columns in a prime-ng p-table

Is there a method to reset the column widths of a p-table in primeng that have been set with 'resizableColumns="true"'? I want to provide users with the ability to revert back to the original sizes. ...

What could be the reason for the page scrolling upwards when clicking on href="#"?

I am encountering an issue with a hyperlink <a href="#" id="someID">Link</a> that is located further down the page. This link is used to trigger an Ajax request, but whenever it is clicked, the page automatically scrolls back to the top. I have ...

What are the steps to streamline the process of obtaining historical NASDAQ stock prices automatically?

Currently, I am manually obtaining raw data for 10-year historical daily prices for over 200 different tickers from . This process involves searching for each ticker, selecting '10 years' from the Timeframe drop-down menu, waiting for the respons ...

Steps to open and configure a Mobile-Angular modal from another controller

Is it possible to use a modal in Angular JS for mobile devices without compromising the layout? I'm having trouble setting up the controller for my modal inside my main controller and passing parameters. Should I consider using ui-bootstrap for this p ...

Craft an engaging and dynamic Image map with SVG technology to elevate responsiveness and interactivity

I'm currently working on a website and I need to create two clickable sections on the home page. Each section will lead to a different specialization of the company. To achieve this, I decided to use a square image split into two right-angled triangle ...

Angular Typescript filter function returning an empty arrayIn an Angular project, a

I have a filtering function in Angular that is returning an empty array. Despite trying similar solutions from previous questions, the issue persists. The function itself appears to be correct. Any assistance would be greatly appreciated. gifts represents ...

AngularJS: Changing color property using toggle when a CSS class is modified

After starting to learn AngularJS, I have been able to find many helpful answers on this forum. However, there is one particular issue that has been causing me frustration. My goal is to dynamically change the color property of an element only when it has ...

The information displayed in my Google snippet does not match the content of the intended URL

It may seem a bit confusing, so to clarify, here is an example: When you click the +1 button on this page, the snippet will display the text and URL from that specific page. However, in my case, the snippet displays text from the homepage URL instea ...

unable to display the responseJson findings

I'm having trouble understanding why this function for an API on National Parks isn't working as expected. As a relatively new programmer, I find that seeking help from others can often shed light on issues I may have missed. Any assistance woul ...

Using Vue 3 to transfer data within the <slot> element

My Objective: I want to showcase an image from a dynamic link in Post.vue using the layout of PostLayout.vue Within PostLayout.vue, there is a <slot> called postFeaturedImage. Inside that slot, there is a <div> where I intend to set th ...

Notifying with Socket.IO in Node.js

Hey there, I'm currently working on implementing a notification system but have hit a roadblock. I've sent an invitation to a user to join the club. socket.on("notify", async (message) => { // invite the user John Doe io.to('socke ...

Utilizing TIMING=1 with eslint to evaluate rule efficiency on Windows operating system

On the official ESLint website, there is a section titled Per-rule Performance. It explains that "setting the TIMING environment variable will prompt the display of the ten longest-running rules upon linting completion, showing their individual runn ...

ERROR: The Search function is not defined and cannot be accessed when the HTMLInputElement event is triggered

I am working on an app that utilizes Marvel's API, and I've been having trouble implementing a search bar in the application. Whenever I attempt to search for a name within this API, the function Search() is showing up as undefined in the HTML. ...

Leverage the most up-to-date vue-eslint-parser - encore for improved

I successfully integrated ESLint with Encore (Symfony). In my .eslintrc.js file, I have configured it as follows: module.exports = { "parser": "vue-eslint-parser", "parserOptions": { "parser": "babel-eslint", "ecmaFeatures": { ...

Designing a dropdown menu within displaytag

I am currently utilizing displaytag to present tabular data, but I aspire to design a user interface akin to "kayak.com" where clicking on a row reveals additional details without refreshing the page. Here is an example scenario before clicking the Detail ...