Vuex state reset function undefined

Question

Getting Uncaught (in promise) ReferenceError: getDefaultState is not defined when trying to use a store reset function on a module store. Nuxt documentation on store setup unfortunately is not very thoughrough. Can anyone point me to what I'm missing to make this available on the root level?

My store reset is based on:
Vuex issue 118
The above is used here with a state function

My store setup is based on:
Latest implementation, that I actually used
Along with this very well structured answer by CMarzin

Framework documentations used:
Vuex documentation and Nuxt store documentation

Not related:
This is about general store usage

My setup:

└── store
  └── user
    └── state.js
    └── getters.js
    └── mutations.js
    └── actions.js
 └── state.js (root state)
 └── getters.js (root getters)
 └── mutations.js (root mutations)
 └── actions.js (root actions)

user/state.js:

const getDefaultState = () => {
  return {
    counter: 2,
    user: false,
  }
}

const state = getDefaultState()

export default {
  state,
}

user/mutations.js:

export default {
  ON_AUTH_STATE_CHANGED_MUTATION: (state, { authUser, claims }) => {
    if (authUser) {
      const { uid, email, emailVerified, displayName, photoURL } = authUser
      state.user = { uid, email, emailVerified, displayName, photoURL }
    } else {
      state.user = false
    }
  },

  RESET_USER_STATE(state) {
    // Merge rather than replace so we don't lose observers
    // https://github.com/vuejs/vuex/issues/1118
    // https://stackoverflow.com/questions/42295340/how-to-clear-state-in-vuex-store
    console.log(state)
    Object.assign(state, getDefaultState())
  },
}

user/actions.js:

export default {
  async onAuthStateChanged({ commit, dispatch }, { authUser }) {
    if (!authUser) {
      dispatch('resetUserState')
      return
    }
    if (authUser && authUser.getIdToken) {
      try {
        const idToken = await authUser.getIdToken(true)
        console.info('idToken', idToken)
      } catch (e) {
        console.error(e)
      }
    }
    commit('ON_AUTH_STATE_CHANGED_MUTATION', { authUser })
  },

  resetUserState({ commit }) {
    commit('RESET_USER_STATE')
  },
}

score 2 · Accepted Answer · answered Mar 10 '21 at 10:03

2

In your user/mutations.js file you use the getDefaultState()-function, but you need to import it in order for the mutations to know what it is. In order to import it, you also have to export it.

So your user/state.js should be changed to this:

export const getDefaultState = () => {
  ...
}

And then if you change your user/mutations.js file:

import { getDefaultState } from './state.js'

export default {
  ...

  RESET_USER_STATE(state) {
    // Merge rather than replace so we don't lose observers
    // https://github.com/vuejs/vuex/issues/1118
    // https://stackoverflow.com/questions/42295340/how-to-clear-state-in-vuex-store
    console.log(state)
    Object.assign(state, getDefaultState())
  },
}

It should now work.

answered Mar 10 '21 at 10:03

Nikolaj Dam Larsen

5,455
4
32
45

Thanks Nikolaj, I will try that. The reason I did not do this, is because I was under the impression that Nuxt takes care of this for me.I thought it assembles the store based on the present folder structure and combines all files in a folder to a module (aka `user/actions.js` + `user/mutations.js` + `user/state.js` + `user/getters.js` become `userModule` that gets added to the root store. Is that thinking incorrect? If so it would reduce some of the benefit I get in terms of clarity by separating files. – RobSteward Mar 10 '21 at 13:58
To be honest, I'm not exactly certain about how these particular files are handled by Nuxt. I reckon they're handled just like regular js files in modern bundlers such as webpack. In such module systems, each file is a module and modules are isolated, so only members exposed using `export` are available from outside the module. :-) I still believe you can use this approach, and I think it's still quite clear even when having to occasionally import and export. – Nikolaj Dam Larsen Mar 10 '21 at 20:12

Vuex state reset function undefined

1 Answers1