Typescript 如何从Vue中的onSubmit functon调用方法？

我有一个按钮，用于在填写表单时通过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>

从“vue”导入{defineComponent，reactive}
从“../store/user”导入userStore
从“vuex”导入{useStore}；
导出默认定义组件({
设置（）{
常数形式=无功({
用户名：“”，
密码：“”，
});
//调用user.ts中的登录函数
const onSubmit=（）=>{
userStore.login（form.username、form.password）；
form.username=“”；
form.password=“”；
};
//返回main中的存储，以便表单可以有一个显示错误消息的模板。
返回{form，userStore，onSubmit}
},
方法：{
//这不起作用。无法从“方法”访问useStore，但可以从安装/装载访问useStore。
//问题是，它必须在点击提交按钮后更新。
setUserState（）{
const store=useStore（）；
store.dispatch（“setActiveUser”）；
},
}
})

我现在找到了问题的解决方案。我将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>

从“vue”导入{defineComponent，reactive}
从“../store/user”导入userStore
从“vuex”导入{useStore}；
导出默认定义组件({
设置（）{
const store=useStore（）；
常数形式=无功({
用户名：“”，
密码：“”，
});
//调用user.ts中的登录函数
函数onSubmit（）{
userStore.login（form.username、form.password）；
form.username=“”；
form.password=“”；
setUserState（）
}
函数setUserState（）{
store.dispatch（“setActiveUser”）；
}
//返回main中的存储，以便表单可以有一个显示错误消息的模板。
返回{form，userStore，onSubmit，setUserState}
},
})

如果您没有使用并且实际使用了

方法，请使用
此。$store
而不是
使用store（）
。在您的例子中，您混合了
设置
和
方法
。如果您使用的是Composition API，则根本不要使用
方法。您可以在setup函数中返回方法（如变量）。