Vue.js 未捕获的TypeError对象不是函数

我正在做一个项目，这个项目包含表单。为了注册，我设计了界面并添加了一些功能。 但我有这个信号，我不知道为什么，我也不知道如何纠正它：

 Uncaught TypeError: Object(...) is not a function

我怎样才能解决这个问题

该文件包含SAI接口的设计和一些辅助功能。 registration.vue：

<template>
  <div class="bg">
    <v-container>
      <v-layout row class="padding">
        <v-flex xs4 sm5 offset-sm3>
          <v-card
            class="mx-auto mt-5 pa-5 text-center secondary text-no-wrap"
            max-width="1000"
            id="limited-products"
          >
            <div class="padding-bottom padding-top">
              ___________________________ or __________________________
            </div>
            <v-card-text>
              <v-container>
                <form>
                  <v-layout row>
                    <v-flex xs12>
                      <v-text-field
                        label="name"
                        v-model="name"
                        type="text"
                        outlined
                        dense
                        required
                        color="#ffffff"
                        class="myfont"
                      >
                        {{ name }}
                      </v-text-field>
                    </v-flex>
                  </v-layout>
                  <v-layout row>
                    <v-flex xs12>
                      <v-text-field
                        label="email"
                        v-model="email"
                        type="text"
                        outlined
                        dense
                        required
                        color="#ffffff"
                        class="myfont"
                      >
                        {{ email }}
                      </v-text-field>
                    </v-flex>
                  </v-layout>
                  <v-layout row>
                    <v-flex xs12>
                      <v-text-field
                        label="password"
                        v-model="password"
                        type="text"
                        outlined
                        dense
                        required
                        color="#ffffff"
                        class="myfont"
                      >
                        {{ password }}
                      </v-text-field>
                    </v-flex>
                  </v-layout>
                  <v-layout row>
                    <v-flex xs12>
                      <v-btn class="red accent-4 color myfont" block>
                        Sign up
                      </v-btn>
                    </v-flex>
                  </v-layout>
                </form>
              </v-container>
            </v-card-text>
            <div>
                 <div class="padding-bot">Have you an account?</div>
              <p class="center textColor">
                 This site is protected by reCAPTCHA and the Google Privacy Policy
              and
                <a href="#">Terms of Service apply.</a>.
              </p>
            </div>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>
<script>
import mapActions from "vuex";
export default {
  data() {
    return {
      name: "",
      email: "",
      password: "",
    };
  },
  methods: {
    ...mapActions(["SIGNUP"]),
    onSignUp() {
      const data = {
        name: this.name,
        email: this.email,
        password: this.password,
      };
      console.log(data);
      this.SIGNUP(data)
        .then((res) => {
          console.log("SignUp Is successed");
          this.$router.push("/signin");
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.myfont {
  font-family: "Mansalva", cursive;
}
.margine {
  margin-left: 20px;
}
.color {
  color: #fafafa;
}
.textColor {
  color: blanchedalmond;
}
.padding {
  padding-top: 30px;
}
.size {
  font-size: 4rem;
} 
.paddingLeft {
  padding-left: 40px;
}
.padding-down {
  padding-top: 40px;
}
.padding-bot {
  padding-top: 20px;
}
.padding-bottom {
  padding-bottom: 40px;
}
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  transform: scale(1);
}
</style>

---

更改

从“vuex”导入mapActions从“vuex”导入{mapActions}
请尽量只提供有意义的代码，而不是整个文件。我编辑了@kissuCan的帖子，你能解释一下从“vuex”导入mapActions的区别吗；并从“vuex”导入{mapActions}@ESModule中的HibaRRRR
import api from "../../axiosWithDelimiterFile";

const actions ={
  namespace: true,
    SIGNUP(_, userData) {
        console.log(`userData: `, userData);
        return new Promise((resolve, reject) => {
          api
            .post(`/auth/signup`, userData)
            .then((res) => {
              console.log(res);
              resolve(res);
            })
            .catch((error) => {
              console.log(error);
              reject(error);
            });
        });
      }

}
export default actions;