使用辅助函数 mapActions

src/views/login/index.vue

@@ -57,6 +57,7 @@
 
 <script>
 import { validMobile } from '@/utils/validate'
+import { mapActions } from 'vuex'
 
 export default {
   name: 'Login',
@@ -114,6 +115,7 @@ export default {
     }
   },
   methods: {
+    ...mapActions(['user/login']),
     showPwd() {
       if (this.passwordType === 'password') {
         this.passwordType = ''
@@ -127,7 +129,10 @@ export default {
     async handleLogin() {
       try {
         await this.$refs.loginForm.validate() // 数据校验
-        await this.$store.dispatch('user/login', this.loginForm) // 必须加await
+        // await this.$store.dispatch('user/login', this.loginForm) // 必须加await
+        // 使用辅助函数 mapActions 将组件的 methods 映射为 store.dispatch 调用
+        await this['user/login'](this.loginForm)
+        this.$router.push('/')
       } catch (error) {
         console.log('捕获错误')
         console.log(error)