如何从 Vue 中的 onSubmit 函数调用方法？答案

【问题标题】：How can I call a method from onSubmit functon in Vue?如何从 Vue 中的 onSubmit 函数调用方法？
【发布时间】：2021-07-21 12:26:37
【问题描述】：

我有一个按钮，用于在填写表单时通过 onSubmit 函数登录用户。但是，我需要调用另一个方法来获取有关用户的一些附加数据，例如权限。但是我无法让它工作。我试图将所需方法中的代码直接放在 onSubmit() 函数中，但它不起作用。这是我的代码：

这是按钮所在的表单。

<form @submit.prevent="onSubmit">
 Some code
 <button class="btn btn-success" type="submit">Log in</button>
</form>

这是我的脚本。

<script lang="ts">
import {defineComponent, reactive} from 'vue'
import userStore from '../store/user'
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const form = reactive({
      username: "",
      password: "",
    });

    //Calls the login function in user.ts
    const onSubmit = () => {
      userStore.login(form.username, form.password);
      form.username = "";
      form.password = "";
    };

        //Returns the store in the main so that the form can have a template that displays the error message.
        return {form, userStore, onSubmit}
    },
    methods:{
        //This did not work. useStore could not be accessed from "methods" but could be accessed from setup/mounted. 
        //The thing is, it must be updated only after clickig on the submit button. 
        setUserState(){
            const store = useStore();
            store.dispatch("setActiveUser");
        },

    }
})
</script>

【问题讨论】：

如果您不使用Composition API 并实际使用methods，请使用this.$store 而不是useStore()。在您的情况下，您正在混合setup 和methods。如果您使用的是 Composition API，则根本不要使用 methods。您可以在设置函数中返回方法（如变量）。

标签： typescript forms vue.js store onsubmit

【解决方案1】：

我现在找到了解决问题的方法。我将 setUserState() 作为 setup() 下的函数移动并删除了这些方法。安装程序现在正在设置商店并返回 setUserState。以下代码有效：

<script lang="ts">
import {defineComponent, reactive} from 'vue'
import userStore from '../store/user'
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const store = useStore();
    const form = reactive({
      username: "",
      password: "",
    });

    //Calls the login function in user.ts
    function onSubmit() {
      userStore.login(form.username, form.password);
      form.username = "";
      form.password = "";

      setUserState()
    }

    function setUserState(){
      store.dispatch("setActiveUser");
    }

        //Returns the store in the main so that the form can have a template that displays the error message.
    return {form, userStore, onSubmit, setUserState}
    },
})
</script>

【讨论】：