Vue.js 项目开发总结

我就是我 2023-02-17 08:54 38阅读 0赞

## Vue-router 嵌套路由 ##

### 一级视图 ###

Laravel 应用首页文件：resources/views/app.blade.php

<!DOCTYPE html>
    <html lang="{ { app()->getLocale() }}">
    <head>
    </head>
    <body>
    <div id="app">
        <router-view></router-view>
    </div>
    </body>
    </html>

### 二级视图 ###

resources/js/pages/Layout.vue，所有 Vue.js 模板继承此模板

<v-app>
      <v-navigation-drawer app>
        
      </v-navigation-drawer>
    
      <v-app-bar app>
        
      </v-app-bar>
    
      
      <v-main>
    
        
        <v-container fluid>
    
          
          <router-view></router-view>
        </v-container>
      </v-main>
    
      <v-footer app>
        
      </v-footer>
    </v-app>

### 路由文件 ###

export default new VueRouter({ 
    
        routes: [
            //一级路由
            { 
                path: '/',
                redirect: { name: 'Desktop'},
                name: 'Hypercell',
                components: Vue.component( 'Layout', require( './pages/Layout' ) ),
                children: [
                    //二级路由
                    { 
                        path: 'register',
                        name: 'Register',
                        components: Vue.component( 'Register', require( './pages/Register' ) ),
                    },
                    { 
                        path: 'desktop',
                        name: 'Desktop',
                        components: Vue.component( 'Desktop', require( './pages/Desktop' ) ),
                    },
                ]
            },
        ]
    });

嵌套路由，参考[官方文档][Link 1]。

在vue中，我们如果不使用嵌套路由，那么只有一级视图中有一个，但是如果使用，那么二级视图中就应该还有一个，这也就构成了嵌套。  
这样访问注册路由时， Register 模板内容就会渲染在 Layout 模板的 标签内部。

我们额外新建了桌面视图，一级路由添加了 redirect 参数redirect: \{name: ‘Desktop’\},这样 Layout.vue(二级视图) 就不会单独出现，首次进入应用后会自动跳转到桌面视图。

## Vuex数据存储器 ##

/* |------------------------------------------------------------------------------- | VUEX modules/users.js |------------------------------------------------------------------------------- | The Vuex data store for the users */
    //从 api 目录下导入用户相关 API
    import HypercellApi from '../api/users';
    
    //导出一个常量作为用户模块
    export const users = { 
        /** * Defines the state being monitored for the module. */
        state: { 
            verificationCodesSendStatus: 0,
            verificationKey:'',
            verificationCodesSendErrors:'',
        },
        /** * Defines the actions used to retrieve the data. */
        actions: { 
            sendVerificationCodes( {  commit },data ){ 
                commit( 'setSendVerificationCodes', 1 );
    
                HypercellApi.sendVerificationCodes(data)
                    .then( function( response ){ 
                        commit( 'setSendVerificationCodes', 2 );
                        commit( 'setVerificationKey' ,response.data.key);
                    })
                    .catch( function(error){ 
                        commit( 'setSendVerificationCodes', 3 );
                        if(typeof error.response.data.errors === "undefined"){ 
                            commit( 'setVerificationCodesSendErrors',error.response.data.message);
                        }else{ 
                            commit( 'setVerificationCodesSendErrors', error.response.data.errors[Object.keys(error.response.data.errors)[0]].toString() );
                        }
                    });
            },
        },
        /** * Defines the mutations used */
        mutations: { 
            setSendVerificationCodes( state, status ){ 
                state.verificationCodesSendStatus = status;
            },
            setVerificationKey( state, data){ 
                state.verificationKey = data;
            },
            setVerificationCodesSendErrors( state, error){ 
                state.verificationCodesSendErrors = error;
            },
        },
        /** * Defines the getters used by the module */
        getters: { 
            getVerificationCodesSendStatus( state ){ 
                return function(){ 
                    return state.verificationCodesSendStatus;
                }
    
            },
            getVerificationKey( state ){ 
                return state.verificationKey;
            },
            getVerificationCodesSendErrors( state){ 
                return state.verificationCodesSendErrors;
            },
        }
    };

**代码讲解**  
state 对象中的状态是所有我们想要跟踪数据的状态，在 users 模块发送手机验证码这一流程中我们需要三个需要跟踪的数据：短信验证码发送状态 verificationCodesSendStatus，以及存储 verificationKey 的对象，存储错误信息的对象 verificationCodesSendErrors。

actions 在模块中用于被调用来修改状态。在发送验证码流程中，我们会调用一个 action 用于发起 API 请求并提交 mutations。我们在 actions 对象中添加了sendVerificationCodes 方法来发送短信验证码。commit 函数用于提交一个 mutation，state 中的每个数据片段都应该有一个与之对应的 mutation。在上面的方法中，我们提交了验证码的发送状态，接下来，调用 API 来加载想要加载的指定信息状态，这些 API 调用定义在 resources/assets/js/api/users.js 文件中，之后链式调用 then 和 catch 方法，前者在 API 请求成功后调用，后者在 API 请求失败后调用，response 变量会传递到这两个方法，以便获取响应数据和请求头。

mutations 定义了数据的更新方式，每个模块都有 state ，每个 state 都需要对应的 mutation 来更新,所有 mutations 所做的工作都是设置 state。

每个 getter 方法都会传入一个局部模块 state 作为参数并返回相应的 state 数据，这就是 getters 所做的全部工作，模板中的数据都是从 Vuex 模块的 getters 属性获得的。

## EventBus事件总线 ##

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。比如我们可以使用它来提示信息。

### 信息提示组件 ###

<template>
        <div class="text-center">
            <v-snackbar
                    v-model="snackbar"
                    :timeout="timeout"
            >
                { {  text }}
                <v-btn
                        color="blue"
                        text
                        @click="snackbar = false"
                >
                    Close
                </v-btn>
            </v-snackbar>
        </div>
    </template>
    <script>
        import { EventBus} from '../event-bus.js';
        export default { 
            data: () => ({ 
                snackbar: false,
                text: '',
                timeout: 4000,
            }),
            mounted() { 
            	//接收 open-message
                EventBus.$on('open-message', function (data) { 
                    this.text = data.text.toString();
                    this.snackbar = true;
                }.bind(this));
            }
        }
    </script>

其他组件可以通过

EventBus.$emit('open-message', { 
              text: this.$store.getters.getRegisterErrors
    });

来触发此事件，达到显示提示和错误信息的效果，其中 text 为传递错误信息的参数。

[Link 1]: https://router.vuejs.org/zh/guide/essentials/nested-routes.html