vuex 未知操作类型："身份验证/注册"

Question

我试图使用vuex中的auth模块创建一个注册页面。我在模块中发布了一个用于注册的api。当我尝试这个代码时，它说"；[vuex]未知操作类型：auth/signUp"；在控制台中。我做错什么了吗？有人能解决这个问题吗？

这是我的vuex身份验证模块

// store/auth/index.jx
import auth from '@/API/API_Auth'
const state = () => ({})
const getters=()=>({})
const mutations = () => ({})
const actions = () => ({
signUp({commit},data){
return auth.signUp(data)
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})
}
})
export default {
namespaced: true,
state,
getters,
actions,
mutations
}

我的vuex商店。

//   store/index.js
import Vue from "vue";
import Vuex from "vuex"
import auth from './module/auth'
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
auth,
},
state:{},
getters:{},
mutations:{},
actions:{},
})

我在main.js 中导入了存储和路由器

// main.js
import store from "./store"
import router from "./router";
new Vue({
store,
router,
render: (h) => h(App),
}).$mount("#app");

这是我的注册组件，我在其中调用操作。

// src/component/signup.vue
<script>
export default {
data() {
return {
name: "",
telNumber: "",
};
},
methods: {
handleSubmit() {
let name= this.name
let telNumber= this.telNumber
this.$store.dispatch("auth/signUp", {name,telNumber})
.then(res=>{
this.$router.push({path: 'otp'});
})
.catch(err=>{console.log(err)})
}
}
}
};
</script>

Answer 1

Vuex模块错误地将actions、mutations和getters设置为函数。只有state应该是一个函数，其余的应该是对象:

const state = () => ({}) // ✅ function
const getters = {} // ✅ object
const mutations = {} // ✅ object
const actions = { // ✅ object
signUp({ commit }, data) {}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}