myspace/src/views/LoginView.vue

<template>
  <ContentBase>
    <div class="row justify-content-md-center">
      <div class="col-3">
        <form @submit.prevent="login">
          <div class="mb-3">
            <label for="username" class="form-label">用户名</label>
            <input
              v-model="username"
              type="text"
              class="form-control"
              id="username"
            />
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">密码</label>
            <input
              v-model="password"
              type="password"
              class="form-control"
              id="password"
            />
          </div>
          <div class="error-msg">{{error_msg}}</div>
          <button type="submit" class="btn btn-primary">登录</button>
        </form>
      </div>
    </div>
  </ContentBase>
</template>

<script>
import ContentBase from "@/components/ContentBase.vue";
import { ref } from "vue";
import {useStore} from "vuex";
import router from "@/router/index";
export default {
  name: "LoginView",
  components: {
    ContentBase,
  },

  setup() {
    const store = useStore();
    let username = ref("");
    let password = ref("");
    let error_msg = ref("");
    const login = ()=> {
        // 登陆前先清空error_msg
        error_msg.value = "";
        // 调用moduleUser组件中的函数，第一个参数是函数名，第二个参数是一些传入的数据
        store.dispatch("login",{
            username: username.value,
            password: password.value,
            success() { // 登陆成功的回调函数
                router.push({name: "userlist"});
            },
            error () { // 登陆失败的回调函数
                error_msg.value = "用户名不存在或者密码错误!";
            }
        });
    };

    return {
      username,
      password,
      error_msg,
      login,
    };
 },
};
</script>

<style scoped>
button {
  width: 100%;
}
.error-msg {
    font-weight: bold;
    color: red;
    margin-bottom: 20px;
}
</style>