Vuex ReferenceError is not defined. How do I set a value correctly?

Question

I have an action in Vuex with a function signUp() how do I set a value for signupError?

This is what I have tried: commit(signupError, null) and $state.commit(signupError, null) however I get an error "ReferenceError: signupError is not defined"

How do I set signupError in the following example?

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', {....

Answer 1

You're missing a mutation but a call to commit requires a mutation to commit.

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

When you call commit, pass it the mutation name and the payload:

commit('SET_ERROR', null);

You also need to use this in the catch block because you can't set state from an action:

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

^{You used both err and error, make sure to keep it consistent}

The whole action:

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;
    }
  }
}

Also, you are not doing anything with the data from the async call.