VueJS ssr +类星体-如何在SSR中称为“装入”？

Question

根据医生的说法：

https://quasar.dev/quasar-cli/developing-ssr/writing-universal-code#Component-Lifecycle-Hooks

由于没有动态更新，所以在所有Vue生命周期挂钩中，只有beforeCreate和created将在beforeCreate期间调用。这意味着其他生命周期挂钩(如beforeMount或挂载)中的任何代码只能在客户机上执行。

我搞不懂该怎么打电话。我有些东西不能在服务器上运行。我会猜到，独自一人“骑”会让它着火，但这似乎没有发生。

为了添加一些上下文，我正在使用基金会构建一个下拉菜单。我让它在标准Vue (非ssr)上工作。

该文件如下所示：

<template>

<ul class="vertical menu accordion-menu" data-accordion-menu data-multi-open="false">
    <li v-for="i in htmlData.sidenav" :key="i.title">
        <router-link v-bind:to=i.href>{{ i.title }}</router-link>
        <ul class="menu vertical nested" v-if="i.sub1">
            <li v-for="j in i.sub1" :key="j.name">
                <router-link v-bind:to=j.href>{{ j.name }}</router-link>
                <ul class="menu vertical nested" v-if="j.sub2">
                    <li v-for="k in j.sub2" :key="k.name">
                        <router-link v-bind:to=k.href>{{ k.name }}</router-link>
                      </li>
                  </ul>
              </li>
          </ul>
      </li>
  </ul>
</div>


</template>


<script>
import SideNav from '../store/modules/sidenav'
import $ from 'jquery'

export default {
    name: 'sidenav',

    computed: {
        htmlData () {
            this.acc()
            return this.$store.state.sn.nav
        }
    },

    // Server-side only
    serverPrefetch () {
        this.$store.registerModule('sn',  SideNav)
        return this.getData()
    },

    // Client-side only
    mounted () {
        console.log('mt')
        const doesExist = !!this.$store.state.sn.nav
        this.$store.registerModule('sn', SideNav, { preserveState: true })

        if (!doesExist) {
            this.getData()
        }
    },

    destroyed () {
        this.$store.unregisterModule('sn')
        this.menu.destroy()
    },

    methods: {
        async getData () {
            return this.$store.dispatch('sn/snav')
        },

        acc () {
            this.$nextTick(function () {
                this.menu = new this.$foundation.AccordionMenu($('.accordion-menu'))
            })
        },
    }
}

当sidenav呈现时，客户端无法看到它，这将导致以下错误：

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'AccordionMenu' of undefined

这是错误的，因为菜单确实呈现，控制台中没有mt日志，尽管pref有日志记录。这会导致页面呈现的一系列其他问题(不需要硬刷新)。

boot/sidenav下的文件如下所示：

// const SideNav = () => import('../layouts/SideNav.vue')
import SideNav from '../layouts/SideNav.vue'

export default async ({ Vue }) => {
    Vue.component('side-nav', SideNav)
}

quasar.conf有这样的内容：

        boot: [
            'axios',
            'sidenav',
            'notemenu',
            {
                path: 'foundation',
                server: false
            },
            {
                path: 'osmd',
                server: false
            }
        ],

客户端看不到foundation或osmd。两者都不能在服务器上运行，因为它们都需要运行window。这是双重混淆，因为sidenav确实呈现并表现为一个反应性组件。

Answer 1

只有beforeCreate和create在SSR和客户端被调用.使用此组件查看生命周期的运行情况。

<template>
<div>Hello World</div>
</template>

<script>
export default {
name: "Test",
beforeCreate() {
 console.log('beforeCreate', process.env, this)
},
created() {
 console.log('created', process.env, this)
},
beforeMount() {
 console.log('created', process.env, this)
},
mounted() {
 console.log('mounted', process.env, this)
},
beforeUpdate() {
 console.log('beforeUpdate', process.env, this)
},
updated() {
 console.log('updated', process.env, this)
},
beforeDestroy() {
 console.log('beforeDestroy', process.env, this)
},
destroyed() {
 console.log('destroyed', process.env, this)
},
preFetch() {
 console.log('preFetch', process.env, this)
}
}
</script>