Vuex 调用模块失败答案

【问题标题】：Vuex fails to call moduleVuex 调用模块失败
【发布时间】：2021-10-28 13:21:45
【问题描述】：

当我尝试调用模块时，我收到错误 [vuex] unknown action type: signUp 这也不起作用，有什么问题？ this.$store.dispatch('auth/signUp', this.form)

方法

methods:{
  signUp() {
    this.$store.dispatch('signUp', this.form)
  }
}

商店

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'

Vue.use(Vuex)

export default function createStore() {
  return new Vuex.Store({
      state() {
          return {}
      },
      mutations: {},
      actions: {},
      modules:{
        auth,
      }
  })
}

模块（在 src/store/modules/auth.js 中）

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default function createStore() {
  return new Vuex.Store({
     state() {
        return {}
     },
     mutations: {},
     actions: {
       signUp({commit, getters}, data) {
         debugger
       },
     },
  })
}

【问题讨论】：

一个模块根本不应该包含Vuex.Store和Vue.use(Vuex)

标签： javascript vue.js vuex vuex-modules

【解决方案1】：

您不应该在您的商店和您的模块中使用import Vuex from 'vuex'。这可能会导致无法识别您的模块等问题，因为您的商店已经初始化。

相反，您应该以这种方式配置您的 Vuex 存储：

商店

import { createStore } from "vuex";
import auth from './modules/auth';
export default createStore({
  modules: {
    auth
  },
});

模块

  const state = {
    user
  };
  const getters = {
     getUserState: (state) => state.user
  };
  const actions = {
    signUp({commit}, data) {
      commit('signUpSuccess', data);
    },
  };
  const mutations = {
    signUpSuccess(state, user) {
      state.user = user;
    },
  }
  export default {
    state,
    getters,
    actions,
    mutations,
  };

【讨论】：