vue.js - Vuex状态重置功能未定义

Question

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

我的 store 重置是基于：
Vuex issue 118
上面这里用了一个状态函数

我的商店设置基于：
我实际使用的最新实现以及CMarzin
提供的这个非常结构化的答案

使用的框架文档：
Vuex 文档 和 Nuxt 商店文档

不相关：
这是关于一般商店使用情况

我的设置：

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

标签： vue.jsnuxt.jsstatevuex

Answer 1

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

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

它现在应该可以工作了。