水合后立即改变Vuex状态?

时间:2017-10-13 11:41:19

标签: javascript vue.js vuejs2 vuex serverside-rendering

我的Vue应用程序使用服务器端呈现。当应用程序加载并保持水分时,我想检测客户端上的情况,然后提交变异。

如果我在安装应用程序之前触摸状态,则会打印此警告 - 正如所料:

  

[Vue警告]:客户端呈现的虚拟DOM树不匹配   服务器呈现的内容。这可能是由错误的HTML引起的   标记,例如在<p>内嵌套块级元素,或   遗失<tbody>。 Bailing水化和表现完全客户端   渲染。

我以为我会找到一个钩子,在水化完成后立即调用

我尝试在主要组件的mounted挂钩中提交变异。我也尝试在app.$mount(...)之后和Vue.nextTick()之后进行此操作。所有这些都太早了:在每一个案例中,我都得到了上述警告。

我找到了两个解决方法:

  1. 在子组件中添加mounted挂钩,该挂钩将以修改后的状态呈现不同的颜色。在父钩子之后,该钩子被称为。好的,因为我只需要在一个地方使用它。但是当我需要它在两个不同的组件中时会变脏。

  2. 使用晦涩的setTimeout()。容易打破,因为我发现没有简单的方法来检查水合作用是否完整,所以我不能轮询。 (水合开始时,data-server-rendered属性将被删除。)

  3. 任何想法如何正确解决?

0 个答案:

没有答案