Vuex状态重置功能未定义

Question

获取Uncaught (in promise) ReferenceError: getDefaultState is not defined 尝试在模块存储上使用存储重置功能时。不幸的是，关于商店设置的 Nuxt 文档不是很详尽。谁能指出我缺少什么以使其在根级别可用？

我的商店重置基于：
Vuex issue 118
以上使用here with a state function

我的商店设置基于：
Latest implementation, that I actually used
连同这个very well structured answer CMarzin

使用的框架文档：
Vuex documentation 和 Nuxt store documentation

不相关：
This is about general store usage

我的设置：

└── 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')
  },
}

Answer 1

在您的user/mutations.js 文件中，您使用getDefaultState()-函数，但您需要导入它以便突变知道它是什么。为了导入它，您还必须导出它。

所以你的user/state.js 应该改成这样：

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

然后，如果您更改 user/mutations.js 文件：

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())
  },
}

它现在应该可以工作了。