Vuex无法调用模块

Question

当我试图调用模块时，我得到错误vuex未知操作类型: 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/ Module /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
       },
     },
  })
}

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