时间戳

首页 > 解决方案 > 用户登录应用程序后如何打开 vuetify 对话框

vue.js - 用户登录应用程序后如何打开 vuetify 对话框

问题描述

在我的应用程序中，我想显示一个模式来在我的应用程序中介绍用户，因此它只会在他第一次登录时出现。我正在做的是存储isNewUser在全局状态中并使用它来知道它是否应该呈现模态或不使用此答案中描述的相同过程。（我没有使用事件总线）

这是我的父组件：

<template>
  <Intro :value="isNewUser" @input="finishTutorial" />
</template>

mounted() {
  const store = this.$store;
  this.isNewUser = store.state.auth.user.isNewUser;
},

当用户登录并呈现此组件时，我看到对话框正在呈现并关闭。如果我按 f5，它会重新加载页面并正确显示对话框。

如果我进行以下修改，它可以工作，但我不想以这种方式解决问题，因为它不适用于所有情况，这取决于用户计算机/互联网的速度。

mounted() {
  setTimeout(() => {
    const store = this.$store;
    this.isNewUser = store.state.auth.user.isNewUser;
  }, 2000);
},

我也尝试过使用 v-if

<template>
    <Intro v-if="isNewUser" :value="true" @input="finishTutorial" />
</template>
<script>
export default {
  components: {
    Intro,
  },
  data() {
    return {
      isNewUser: false,
    };
  },
  mounted() {
    const store = this.$store;
    this.isNewUser = store.state.auth.user.isNewUser;
  },
  methods: {
    async finishTutorial() {
      this.$store.dispatch('auth/finishTutorial');
      this.isNewUser = false;
    },
  },
};
</script>

标签： vue.jsvuetify.js

解决方案

您可以使用计算属性来执行此操作：

computed: {
  isNewUser() {
     return this.$store.state.auth.user.isNewUser;
  }
}

在模板中你会这样做：

<template>
  <Intro :value="isNewUser" @input="finishTutorial" />
</template>

推荐阅读