I keep encountering a Vuex error stating ReferenceError is not defined. What is the correct way to properly set a value

Question

I keep encountering a Vuex error stating ReferenceError is not defined. What is the correct way to properly set a value

I have a question regarding Vuex. How can I properly set a value for signupError in my function signUp()?

I attempted using the following code snippets: commit(signupError, null) and

$state.commit(signupError, null)

, but I encountered an error stating "ReferenceError: signupError is not defined".

Could you provide guidance on how to correctly set up signupError in the given scenario?

store.js

import Vuex from "vuex";
import Vue from "vue";
import { Auth } from "aws-amplify";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: null,
    signupError: null
  },


  actions: {
    async signUp({ commit }, { username, password, firstName, lastName }) {
      commit(signupError, null)
      try {
        const data = await Auth.signUp({
          username,
          password,
          attributes: {
            email: username
          }
        });
       
      } catch (error) {
        state.signupError = err.message || err
        console.log('error signing up:', error);
        return error;
    }

main.js

....

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store: store, // Vuex mechanism to "inject" the store into all child components from the root component.
  render: h => h(App),
  router
})

reg.vue

....
 await this.$store.dispatch('signUp', {....

javascript vue.js vuejs2 vuex

Answer 1

Answer №1

You have a missing mutation, as a call to commit requires a mutation for it to commit.

mutations: {
  SET_ERROR(state, value) {
    state.signupError = value;
  }
}

Ensure that when you call commit, you pass the mutation name and payload:

commit('SET_ERROR', null);

Remember to include this in the catch block because you can't directly set state from an action:

commit('SET_ERROR', error.message || error);

^{Be consistent with your variable names; choose either err or error and stick with it throughout your code}

The complete action should look like this:

actions: {
  async signUp({ commit }, { username, password, firstName, lastName }) {
    commit('SET_ERROR', null);
    try {
      const data = await Auth.signUp({
        username,
        password,
        attributes: {
          email: username
        }
      });
    } catch (error) {
      commit('SET_ERROR', error.message || error);
      console.log('error signing up:', error);
      return error;
    }
  }
}

In addition, ensure you are handling the data returned by the asynchronous call appropriately.

Answer 2

You have a missing mutation, as a call to commit requires a mutation for it to commit.

mutations: {
  SET_ERROR(state, value) {
    state.signupError = value;
  }
}

Ensure that when you call commit, you pass the mutation name and payload:

commit('SET_ERROR', null);

Remember to include this in the catch block because you can't directly set state from an action:

commit('SET_ERROR', error.message || error);

^{Be consistent with your variable names; choose either err or error and stick with it throughout your code}

The complete action should look like this:

actions: {
  async signUp({ commit }, { username, password, firstName, lastName }) {
    commit('SET_ERROR', null);
    try {
      const data = await Auth.signUp({
        username,
        password,
        attributes: {
          email: username
        }
      });
    } catch (error) {
      commit('SET_ERROR', error.message || error);
      console.log('error signing up:', error);
      return error;
    }
  }
}

In addition, ensure you are handling the data returned by the asynchronous call appropriately.

I keep encountering a Vuex error stating ReferenceError is not defined. What is the correct way to properly set a value

Answer №1

Similar questions

Creating a custom function in JavaScript to interact with the `windows.external` object specifically for use

Using jquery to toggle active nav links in Bootstrap

`Implementing Typescript code with Relay (Importing with System.js)`

What could be causing the shadow to appear misplaced in Three.js?

I attempted to retrieve a PHP file in my HTML document using AJAX, however, the scripts embedded in the file are not functioning as expected

In what ways can I apply the outcome of this commitment?

What is the process for exporting all sub-module types into a custom namespace?

Does anyone have tips on how to upload images to MongoDB using React?

Using JWPlayer 6 and JWPlayer 7 simultaneously in one project - how is it done?

Implement a delay for updating the style of a button by using the setTimeout function

Adjust the border hue of the MUI disabled outline input

Dealing with encoding problems in Node.JS when parsing JSON data with UTF-

Using multiple images to create a visual in three.js

Issue with react-intl not updating the placeholder value

Disabling the previous and next buttons in an MD tab

What are the best methods for improving the rendering performance of multiple sphereGeometry objects in three.js?

Adjusting the speed of Vuetify transitions: A guide on setting the perfect transition speed

Tips for initiating a function at a designated scroll point on a webpage

Securing routes in Node.js using Passport.js

I'm struggling with a namespace conflict in Javascript - how can I access this value in the function call?