nuxt如何在page页面传值给layout页面

Question

问题描述

nuxt有一个默认布局 default.vue.

内容如下：

<template>
    <div class="header">
        <el-row type="flex" class="row-bg" align="middle">
            <el-col>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
                    <el-menu-item index="1">
                        <nuxt-link to="/">首页</nuxt-link>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <nuxt-link to="/user">个人中心</nuxt-link>
                    </el-menu-item>
                    <el-menu-item index="3" v-if="isLogin" v-on:click="logout">登出</el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
        <nuxt/>
    </div>
</template>


<script>
    export default {
        data() {
            // 未登录
            let isLogin = false

            // token存在时显示登出按钮
            let token = this.$cookies.get("token")
            if (token) {
                isLogin = true
            }
            return {
                activeIndex: '1',
                isLogin: isLogin
            };
        },
        methods: {
            // 登出
            logout() {
                this.$cookies.remove("token")
                this.isLogin = false
                this.$router.push("/user/login")
            }
        }
    }
</script>

这个默认布局，一开始进来的时候 isLogin 会根据cookie有没有存在被渲染为 false。第一次进来的时候是false，这个el-menu-item组件不显示。

然后 page 文件夹下 login.vue如下：

<template>
    <el-row type="flex" class="row-bg" align="middle">
        <el-col :span="6">
            <div class="grid-content">
                <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-alert :title="message" type="error" v-if="isFail"></el-alert>
                    <el-form-item label="用户名" prop="username"
                                  :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
                        <el-input v-model="ruleForm.username" autocomplete="on"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="pass" :rules="{required: true, message: '密码不能为空', trigger: 'blur'}">
                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-col>
    </el-row>
</template>


<script>
    export default {
        data() {
            return {
                ruleForm: {
                    pass: '',
                    username: ''
                },
                isFail: false,
                message: "密码错误"
            };
        },

        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // 表格验证成功
                        console.log("start login...")
                        return this.$axios.post("/app/user/token/get", {
                            "user_name": this.ruleForm.username,
                            "pass_wd": this.ruleForm.pass
                        }).then(result => {
                            // 登录成功
                            if (result.data.flag == true) {
                                let token = result.data.data
                                this.$cookies.set("token", token, {maxAge: 7 * 24 * 60 * 60, path: "/"})
                                
                                // 这里啊，要告诉布局那里的 isLogin 变为 true， 显示那个登出 按钮
                                return this.$router.push("/user")
                            } else {
                                this.isFail = true
                                this.message = result.data.error.msg
                                return
                            }
                        })
                    } else {
                        console.log('form error submit!!');
                        return false;
                    }
                });
            }
            ,
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

当登录成功后，让layout 把那个 isLogin = true, 显示出那个 登出按钮

// 这里啊，要告诉布局那里的 isLogin 变为 true， 显示那个登出 按钮

现在刚学 nuxt， 一脸蒙蔽， 怎么通信。。。感谢感谢

Answer 1

1、登录状态一般存储在cookie, nuxt首次渲染页面时,一部分在服务器端,所以不能存在storage(只有浏览器有);
2、传值的话可以用路由传值、vuex、事件、事件总线