Nuxt.js打造旅游网站第3篇_登录页面的编写

主要知识点：

1.使用vuex/store管理数据

2.登录注册逻辑

3.Nuxt的本地存储

1.登录页面

1.1登录页面布局

替换pages/user/login.vue的代码如下

<template>
    <div class="container">
        <!-- 主要内容 -->
        <el-row 
        type="flex" 
        justify="center" 
        align="middle" 
        class="main">

            <div class="form-wrapper">
                <!-- 表单头部tab -->
                <el-row type="flex" justify="center" class="tabs">
                    <span :class="{active: currentTab === index}" 
                    v-for="(item, index) in [`登录`, `注册`]"
                    :key="index" 
                    @click="handleChangeTab(index)">
                        {{item}}
                    </span>
                </el-row>

                <!-- 登录功能组件 -->
                <LoginForm v-if="currentTab == 0"/>

                <!-- 注册功能组件 -->
                <!-- <RegisterForm v-if="currentTab == 1"/> -->
            </div>
        </el-row>
    </div>
</template>

<script>
import LoginForm from '@/components/user/loginForm'
export default {
    components: {
      LoginForm
    },
    data(){
        return {
            currentTab: 0
        }
    },
    methods: {
        handleChangeTab(index){
            this.currentTab = index;
        },
    }
}
</script>

<style scoped lang="less">
.container{
    background:url(http://157.122.54.189:9095/assets/images/th03.jfif) center 0;
    height: 700px;
    min-width:1000px;

    .main{
        width:1000px;
        height: 100%;
        margin:0 auto;
        position: relative;
        
        .form-wrapper{
            width:400px;
            margin:0 auto;
            background:#fff;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
            overflow:hidden;
            
            .tabs{
                span{
                    display: block;
                    width:50%;
                    height: 50px;
                    box-sizing: border-box;
                    border-top:2px #eee solid;
                    background:#eee;
                    line-height: 48px;
                    text-align: center;
                    cursor: pointer;
                    color:#666;

                    &.active{
                        color:orange;
                        border-top-color: orange;
                        background:#fff;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
</style>

pages/user/login.vue

1.2 登录功能

思路：

1.在components/user中新建loginForm.vue表单组件

2.使用Element:#000000;">{ this.$router.push('/'); }) } }); } }

actions总结

什么情况下把方法封装到actions？

　　异步的方法需要复用的时候，可以考虑把方法封装到actions，比如登录这些方法。

actions要怎么声明？

　　actions里面的方法第一个参数是store对象,这个对象下面可以访问到所有store的属性(commit, dispatch, state...)用commit修改state数据；

　　第二个是可选的，是传递进来的参数。

怎么调用actions的方法？

this.$store.dispatch('user/login', this.form).then(res=>{ this.$router.push('/'); })

store总结

什么时候使用Vuex?

　　项目数据比较多，需要多个组件去共享数据的时候可以使用vuex

怎么使用？

　　state: 存储数据

　　mutations: 设置修改state的数据

　　actions: 异步修改state的数据，把可以复用的请求放到actions里面（actions需要调用mutations的方法修改数据）

使用时候注意的问题

　　单词别写错

　　注意调用mutations和actions的方法记得加上模块名字（命名空间）

转载于:https://www.cnblogs.com/replaceroot/p/11179460.html