在下面的"我的应用程序"组件中,不会触发mounted()生命周期挂钩:

<template>
  <div>
    <div v-if='signedIn'>
        <router-view />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Oidc from 'oidc-client'

Vue.use(Oidc)

export default {
  data () {
    return {
      user: null,
      signedIn: false,
      mgr: new Oidc.UserManager({...settings...})
    }
  },
  methods: {
    signIn () {
    },
    signOut () {
    },
    getUser () {
    },
    mounted () {
      this.getUser()
    }
  }
}
</script>

我已经判断了好几次代码,不确定我遗漏了什么.

new Vue({
  el: '#app',
  render: h => h(App),
  router
})

推荐答案

method区域内有mounted,这意味着这是一个叫做mounted(如getUser())的"函数",而不是组件安装时自动调用的mounted.

你应该像这样改变它:

methods: {
    signIn () {
    },
    signOut () {
    },
    getUser () {
    }   
  },
mounted () {
      this.getUser()
}

然后,它应该可以正常工作,并作为一种正常的生命周期方法由Vue自动调用.

希望有帮助!

Vue.js相关问答推荐

通过另一个文件调用模块化窗口组件

Vuetify/Vue3 插槽模板之间的阴影

传单 vue3 组件变体打开错误的标记 - 单击时弹出

如何在vue js模板中添加foreach和for循环

何时将代码拆分为 Nuxt 中的组件?

如果单元格不可见,则以编程方式打开行的编辑模式. Ag 网格,Vue.js

在 dom 内移动 Vue 组件?

动态插入字符串上的 Vue 事件处理程序不起作用

将检测外部点击自定义指令从 Vue 2 迁移到 Vue 3

验证子组件Vue vee-validate

带有子菜单的 Vuetify 导航抽屉

包含 Vue 组件的 HTML 字符串的 Nuxt 渲染函数

如何从 vue 组件调用 App.vue 中的方法

在 VUE JS 的光标位置插入字符

Vuetify - 如何进行分页?

使用 axios 和 vue.js 取消先前的请求

带有 Google Auth Signin 的 Vuejs 全局函数

使用 Vuetify 的可滚动数据表

使用 Vee-validate 禁用按钮,直到正确填写表单

Apollo 客户端在向服务器发送Mutations 时返回400(错误请求)错误