带有 SSR 的 Vue.js 3 中的 Vuex、watch 和生命周期钩子答案

【问题标题】：Vuex, watch and lifecycle hooks in Vue.js 3 with SSR带有 SSR 的 Vue.js 3 中的 Vuex、watch 和生命周期钩子
【发布时间】：2021-11-10 08:40:42
【问题描述】：

我知道watch 在beforeUpdate 生命周期事件发生之前运行。但是，我在 watch 中有一些东西必须在重新渲染/更新虚拟 DOM 之前完成。

我的watch是这样的：

setup () {
     watch(() => $route.params.ProductID, async () => {
     // Update Vuex here with ProductID data and then do a whole bunch of stuff here that must complete before updating the DOM
     },
    {
        deep: true,
        immediate: true
    })

onBeforeUpdate(() => {
    // Use stuff that was created in watch above
})
}

此代码不仅由客户端运行，还为 SSR 服务端运行。

我曾尝试测试watch 是否会在onBeforeUpdate() 像这样运行之前先完成所有任务：

setup() {
    async function testWatch(){
          setTimeout(function(){ return console.log("I am watcher timeout"); }, 3000);}
    
     setup () {
             watch(() => $route.params.ProductID, async () => {
             await testWatch();
             },
            {
                deep: true,
                immediate: true
            })
        
        onBeforeUpdate(() => {
            console.log("I am onBeforeUpdate hook");
        })
        }
}

如果我运行上面的命令，我会得到以下输出：

I am onBeforeUpdate hook

然后 3 秒后..

I am watcher timeout

如何确保watch 中的代码将在组件中的其他任何内容之前执行？我需要这样做，以便组件在渲染之前可以使用正确的数据。

【问题讨论】：

标签： javascript node.js vue.js vuejs3

【解决方案1】：

如何确保手表中的代码先于组件中的其他代码执行？

你不能——这是不可能的。

您最好的选择是将异步代码移动到文档中描述的路由守卫 - Fetching Data Before Navigation

该方法的问题是（或可能 - 有时）获取代码（示例中的 getPost 函数）不能是组件上的方法，并且（逻辑上）无法访问 this

【讨论】：

这种方法的另一个问题是服务器端渲染。如果我使用 beforeEnter 或 onBeforeRouteUpdate 和 vue-router 并在加载组件之前预加载数据存储 (Vuex)，如果在其间访问不同的产品路径，则数据将被覆盖。因此，如果您转到route/product/1，使用ProductID=1 加载数据存储，但随后其他人请求route/product/2，您将返回ProductID=2 的数据，而不是ProductID=1。这很烦人。
嗯，听起来您没有正确执行 SSR。每个 SSR 请求都应该有自己的路由器/Vuex 实例 - Avoid Stateful Singletons。您所描述的听起来像是您的路由器在所有活动请求之间共享......

【解决方案2】：

我通过创建一个数据属性“正在加载”来解决此类问题，该属性在加载完成时设置为 false。

然后使用 v-if 仅在 'loading' 为 false 时渲染内容。

【讨论】：

其中一些数据被其他插件使用，然后注入到页面中，例如<head> 标签。在这种情况下，组件的 HTML 中的 v-if 没有帮助